feat: create a begin of a front

src/components/ui/rating.tsx

@@ -0,0 +1,27 @@
+import { RatingGroup } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface RatingProps extends RatingGroup.RootProps {
+  icon?: React.ReactElement
+  count?: number
+  label?: React.ReactNode
+}
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  function Rating(props, ref) {
+    const { icon, count = 5, label, ...rest } = props
+    return (
+      <RatingGroup.Root ref={ref} count={count} {...rest}>
+        {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
+        <RatingGroup.HiddenInput />
+        <RatingGroup.Control>
+          {Array.from({ length: count }).map((_, index) => (
+            <RatingGroup.Item key={index} index={index + 1}>
+              <RatingGroup.ItemIndicator icon={icon} />
+            </RatingGroup.Item>
+          ))}
+        </RatingGroup.Control>
+      </RatingGroup.Root>
+    )
+  },
+)

src/pages/BorrowBook/BorrowBookHeader/index.tsx

@@ -0,0 +1,13 @@
+import { Box, Flex, Image } from '@chakra-ui/react';
+
+const BorrowBookHeader = () => (
+  <Box>
+    <Box as="header" bg="#D9D9D9" color="black" px={20} py={4}>
+      <Flex justify="center" align="center">
+        <Image src="/logo.png" alt="Logo" boxSize="50px" />
+      </Flex>
+    </Box>
+  </Box>
+);
+
+export default BorrowBookHeader;

src/pages/BorrowBook/BorrowBookLivro/index.tsx

@@ -0,0 +1,47 @@
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
+import { Rating } from "../../../components/ui/rating";
+
+
+interface Book {
+  title: string;
+  author: string;
+  rating: number;
+  description: string;
+  coverImage: string;
+}
+
+const BorrowBookLivro = ({ book }: { book: Book }) => (
+  <Box maxW="100%" p={4}>
+    <Flex justify="center" align="center" mb={8}>
+      <Image 
+        src={book.coverImage} 
+        alt={`Capa do livro ${book.title}`} 
+        boxSize="150px" 
+        objectFit="cover" 
+        mr={8} 
+      />
+      <Box maxW="400px">
+        <Text fontSize="2xl" fontWeight="bold" mb={4}>{` ${book.title}`}</Text>
+        <Text fontSize="lp" mb={4}> Autor: {book.author}</Text>
+
+
+        <Box mt={4}>
+          <Text fontSize="lp" fontWeight="bold" mb={2}></Text>
+          <Rating 
+            readOnly allowHalf defaultValue={book.rating} size={'xs'} colorPalette={'yellow'} 
+          />
+        </Box>
+      </Box>
+    </Flex>
+
+    <Flex px={8} py={2}>
+      <Box maxW="400px">
+        <Text fontSize="md">
+          <strong>Descrição:</strong> {book.description}
+        </Text>
+      </Box>
+    </Flex>
+  </Box>
+);
+
+export default BorrowBookLivro;

src/pages/BorrowBook/BorrowButton/index.tsx

@@ -0,0 +1,78 @@
+import { HStack } from "@chakra-ui/react";
+import { toaster } from "../../../components/ui/toaster";
+import {
+  DialogContent,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  DialogHeader,
+  DialogFooter,
+  DialogBody,
+  DialogActionTrigger,
+  DialogCloseTrigger,
+} from "../../../components/ui/dialog";
+import { Button } from "../../../components/ui/button";
+import { useNavigate } from "react-router";
+
+interface Book {
+  title: string;
+  author: string;
+  rating: number;
+  description: string;
+  coverImage: string;
+  status: string;
+}
+
+const BorrowBook = ({ book }: { book: Book }) => {
+  const navigate = useNavigate();
+
+  const handleBorrow = async () => {
+    toaster.create({
+      title: `Empréstimo Realizado`,
+      type: "success",
+    });
+
+    navigate("/perfil");
+  };
+
+  return (
+    <HStack flexDirection="column" alignItems="center">
+      <DialogRoot size="xs" placement="center">
+        <DialogTrigger asChild>
+          <Button
+            type="button"
+            width="100%"
+            size="lg"
+            bg={book.status !== "Available" ? "#FF8800" : "#FF8800"}
+            color={book.status !== "Available" ? "white" : "White"} 
+            fontWeight="semibold" 
+            disabled={book.status !== "Available"}
+          >
+            {book.status !== "Available" ? "Livro indisponível" : "Pegar Emprestado"}
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle></DialogTitle>
+          </DialogHeader>
+          <DialogBody>
+            <p>Deseja realizar esse empréstimo?</p>
+          </DialogBody>
+          <DialogFooter>
+            <DialogActionTrigger asChild>
+              <Button bg="red" size="sm">
+                Cancelar
+              </Button>
+            </DialogActionTrigger>
+            <Button bg="green" size="sm" onClick={handleBorrow}>
+              Confirmar
+            </Button>
+          </DialogFooter>
+          <DialogCloseTrigger />
+        </DialogContent>
+      </DialogRoot>
+    </HStack>
+  );
+};
+
+export default BorrowBook;

src/pages/BorrowBook/index.tsx

@@ -0,0 +1,35 @@
+import { Box, Grid } from '@chakra-ui/react';
+import { NavBar } from '../../components/NavBar';
+import BorrowBookHeader from './BorrowBookHeader';
+import BorrowBookLivro from './BorrowBookLivro';
+import BorrowButton from './BorrowButton';
+
+const book = {
+  title: "Curupira, O guardião da floresta",
+  author: "Saci-Pererê",
+  rating: 4.5,
+  description: "Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.",
+  coverImage: "/logo.png",
+  status: "Available"
+};
+
+function BorrowBook() {
+  return (
+    <Box>
+      <BorrowBookHeader />
+      <Grid
+        templateColumns="1fr"
+        gap={8}
+        justifyItems="center"
+        alignItems="center"
+        p={4}
+      >
+        <BorrowBookLivro book={book}/>
+        <BorrowButton book={book}/>
+      </Grid>
+     <NavBar />
+    </Box>
+  );
+}
+
+export default BorrowBook;

src/pages/SignUp/SignUpForm/index.tsx

@@ -93,12 +93,14 @@ function SignUpForm() {
             return onlyNumbers.length === 11 || "Telefone inválido.";
         }
     })}
+
     onChange={(e) => {
-        const formatted = formatPhoneNumber(e.target.value); 
-        e.target.value = formatted; 
-        register('phone').onChange(e); 
-        trigger('phone'); 
-    }}
+      const formatted = formatPhoneNumber(e.target.value); 
+      register('phone').onChange({ 
+          target: { name: 'phone', value: formatted } 
+      }); 
+      trigger('phone'); 
+  }}
 />
           <Field invalid={!!errors.password} errorText={errors.password?.message}>
             <PasswordInput