[feat] Initial open-library homepage, component & hook fix

Author: dethan3

.husky/pre-commit

@@ -1 +1 @@
-npm test
+pnpm test

components/open-library/Footer.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Container, Row, Col, Nav } from 'react-bootstrap';
+
+const FooterComponent = () => {
+  return (
+    <footer className="bg-dark text-light py-4 mt-5">
+      <Container>
+        <Row>
+          <Col md={4} className="mb-3 mb-md-0">
+            <h5>Open Library</h5>
+            <p>
+              A community-driven library for sharing knowledge and stories.
+              Built with open source. Powered by generosity.
+            </p>
+          </Col>
+          <Col md={2} className="mb-3 mb-md-0">
+            <h5>Quick Links</h5>
+            <Nav className="flex-column">
+              <Nav.Link href="#home" className="text-light px-0">
+                Home
+              </Nav.Link>
+              <Nav.Link href="#catalog" className="text-light px-0">
+                Catalog
+              </Nav.Link>
+              <Nav.Link href="#about" className="text-light px-0">
+                About Us
+              </Nav.Link>
+              <Nav.Link href="#donate" className="text-light px-0">
+                Donate
+              </Nav.Link>
+            </Nav>
+          </Col>
+          <Col md={3} className="mb-3 mb-md-0">
+            <h5>Contact</h5>
+            <p className="mb-1">Email: info@openlibrary.community</p>
+            <p>Address: 123 Library Lane, Knowledge City, World</p>
+          </Col>
+          <Col md={3}>
+            <h5>Follow Us</h5>
+            <div>
+              <a href="#facebook" className="text-light me-3">
+                Facebook
+              </a>
+              <a href="#twitter" className="text-light me-3">
+                Twitter
+              </a>
+              <a href="#instagram" className="text-light me-3">
+                Instagram
+              </a>
+              <a href="#linkedin" className="text-light">
+                Linkedin
+              </a>
+            </div>
+          </Col>
+        </Row>
+        <Row className="mt-3">
+          <Col className="text-center text-muted">
+            <small>
+              &copy; {new Date().getFullYear()} Open Library Community. All
+              Rights Reserved.
+            </small>
+          </Col>
+        </Row>
+      </Container>
+    </footer>
+  );
+};
+
+export default FooterComponent;

components/open-library/Navbar.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Navbar,
+  Nav,
+  Container,
+  Button,
+  Form,
+  FormControl,
+} from 'react-bootstrap';
+
+const NavbarComponent = () => {
+  return (
+    <Navbar bg="light" expand="lg" sticky="top" className="mb-4 shadow-sm">
+      <Container fluid>
+        <Navbar.Brand href="#home" className="d-flex align-items-center">
+          Open Library
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Collapse id="basic-navbar-nav">
+          <Nav className="me-auto">
+            <Nav.Link href="#home">Home</Nav.Link>
+            <Nav.Link href="#catalog">Catalog</Nav.Link>
+            <Nav.Link href="#about">About</Nav.Link>
+            <Nav.Link href="#donate">Donate</Nav.Link>
+            <Nav.Link href="#how-to-borrow">How to Borrow</Nav.Link>
+            <Nav.Link href="#review">Review</Nav.Link>
+          </Nav>
+          <Form className="d-flex">
+            <FormControl
+              type="search"
+              placeholder="Search Books..."
+              className="me-2"
+              aria-label="Search"
+            />
+            <Button variant="outline-success">Search</Button>
+          </Form>
+          <Button variant="primary" className="ms-lg-2 mt-2 mt-lg-0">
+            Login/Register
+          </Button>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default NavbarComponent;

package.json

@@ -81,5 +81,6 @@
   },
   "lint-staged": {
     "*.{html,md,scss,json,yml,js,mjs,ts,tsx}": "prettier --write"
-  }
+  },
+  "packageManager": "pnpm@10.8.1+sha512.c50088ba998c67b8ca8c99df8a5e02fd2ae2e2b29aaf238feaa9e124248d3f48f9fb6db2424949ff901cffbb5e0f0cc1ad6aedb602cd29450751d11c35023677"
 }

pages/_app.tsx

@@ -46,7 +46,8 @@ const App: FC<AppProps> = observer(({ Component, pageProps }) => {
       name: t('hackathon'),
     },
     {
-      href: '/library', name: t('open_library'),
+      href: '/open-library',
+      name: t('open_library'),
     },
   ];
   return (