From bc7cad7e3beca82957d2f41452f977995e6c40d2 Mon Sep 17 00:00:00 2001 From: aftabrehan Date: Thu, 1 Feb 2024 20:28:42 +0500 Subject: [PATCH] Created Layout & Responsive Header Component --- README.md | 14 ++++----- app/layout.tsx | 18 +++++++++-- app/not-found.tsx | 6 ++-- app/page.tsx | 6 ++-- components/MobileNav.tsx | 42 ++++++++++++++++++++++++++ components/button.tsx | 30 +++++++++++++++++++ components/footer.tsx | 6 ++++ components/header.tsx | 39 ++++++++++++++++++++++++ components/modal/modal-portal.tsx | 19 ++++++++++++ components/modal/modal.tsx | 41 +++++++++++++++++++++++++ components/nav-dropdown.tsx | 50 +++++++++++++++++++++++++++++++ components/navbar.tsx | 45 ++++++++++++++++++++++++++++ components/search-bar.tsx | 33 ++++++++++++++++++++ constants/nav-items.ts | 28 +++++++++++++++++ hooks/useClickOutside.ts | 16 ++++++++++ package.json | 11 +++---- public/cross.svg | 3 ++ public/hamburger.svg | 5 ++++ public/search.svg | 3 ++ tailwind.config.ts | 21 ++++++------- yarn.lock | 7 +++++ 21 files changed, 413 insertions(+), 30 deletions(-) create mode 100644 components/MobileNav.tsx create mode 100644 components/button.tsx create mode 100644 components/footer.tsx create mode 100644 components/header.tsx create mode 100644 components/modal/modal-portal.tsx create mode 100644 components/modal/modal.tsx create mode 100644 components/nav-dropdown.tsx create mode 100644 components/navbar.tsx create mode 100644 components/search-bar.tsx create mode 100644 constants/nav-items.ts create mode 100644 hooks/useClickOutside.ts create mode 100644 public/cross.svg create mode 100644 public/hamburger.svg create mode 100644 public/search.svg diff --git a/README.md b/README.md index 2bfd267..5fb8b88 100644 --- a/README.md +++ b/README.md @@ -6,20 +6,22 @@ Built using Next.js and Tailwind CSS. 1. Clone the repository: -``` +```bash git clone https://github.com/aftabrehan/zin-tools.git +# or +gh repo clone aftabrehan/zin-tools ``` 2. Install the required dependencies: ```bash -npm +npm install # or -yarn +yarn install # or -pnpm +pnpm install # or -bun +bun install ``` 3. Run the development server: @@ -36,7 +38,5 @@ bun dev Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - > [!NOTE] > This project is created solely for test/portfolio purposes, and you are free to use it as you see fit. diff --git a/app/layout.tsx b/app/layout.tsx index 2fbdde6..2d4fe34 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,9 @@ -import type { Metadata } from 'next' import { Inter } from 'next/font/google' +import type { Metadata } from 'next' + +import { Header } from '@/components/header' +import { Footer } from '@/components/footer' + import './globals.css' const inter = Inter({ subsets: ['latin'] }) @@ -16,7 +20,17 @@ export default function RootLayout({ }>) { return ( - {children} + +
+
+
{children}
+
+