feat:front of borrow book

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,46 @@
+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}>{`Título: ${book.title}`}</Text>
+        <Text fontSize="lg" mb={4}><strong>Autor:</strong> {book.author}</Text>
+
+
+        <Box mt={4}>
+          <Text fontSize="lp" fontWeight="bold" mb={2}>Avaliação:</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/Buton/index.tsx

@@ -0,0 +1,11 @@
+import { Box, Button } from '@chakra-ui/react';
+
+const BorrowButton = () => (
+  <Box display="flex" justifyContent="center" alignItems="center" >
+    <Button bg="#FF8800" color="black" size="lg">
+      Pegar Emprestado
+    </Button>
+  </Box>
+);
+
+export default BorrowButton;

src/pages/BorrowBook/index.tsx

@@ -1,23 +1,32 @@
-import { Box, Button, Heading, Flex, Image } from '@chakra-ui/react';
+import { Box, Grid } from '@chakra-ui/react';
 import { NavBar } from '../../components/NavBar';
-
+import BorrowBookHeader from './BorrowBookHeader';
+import BorrowBookLivro from './BorrowBookLivro';
+import BorrowButton from './Buton';
+
+const book = {
+  title: "Curupira, O guardião da floresta",
+  author: "Saci-Pererê",
+  rating: 5,
+  description: "Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.",
+  coverImage: "/logo.png"
+};
 
 function BorrowBook() {
   return (
     <Box>
-      <Box as="header" bg="#D9D9D9" color="black" px={8} py={10}>
-        <Flex justify="space-between" align="center"></Flex>
-        <Flex justify="center" align="center" h="100%">
-        <Image src="/logo.png" alt="Logo" boxSize="100px" />
-        </Flex>
-
-
-
-
-      </Box>
-
-
-
+      <BorrowBookHeader />
+
+      <Grid
+        templateColumns="1fr"
+        gap={8}
+        justifyItems="center"
+        alignItems="center"
+        p={4}
+      >
+        <BorrowBookLivro book={book} />
+        <BorrowButton />
+      </Grid>
 
       <NavBar />
     </Box>