feat: header component develop

app/(main)/(client-layout)/page.js

@@ -11,7 +11,7 @@ export default async function Home({ searchParams }) {
   const currentPage = searchParams.page || 1
   const users = await usersRepo.getAll()
   return (
-    <main>
+    <main className="xl:mt-28">
       <div>Hello World</div>
       <div>query: {query}</div>
       <div>currentPage: {currentPage}</div>

components/Header.js

@@ -0,0 +1,28 @@
+import Link from 'next/link'
+import { Logo, Icons, Search, Signup, Cart } from 'components'
+export default function Header() {
+  return (
+    <>
+      <header className="px-4 bg-white lg:shadow xl:fixed xl:z-20 xl:top-0 xl:left-0 xl:right-0">
+        <div className="container max-w-[1700px] lg:flex lg:py-2">
+          <div className="inline-flex items-center justify-between w-full border-b lg:border-b-0 lg:max-w-min lg:mr-8">
+            <Icons.Question className="icon lg:hidden" />
+            <Link passHref href="/">
+              {/* <Logo className="w-24 h-14" /> */}
+              <div className="w-24 h-14 bg-red-200"></div>
+            </Link>
+            <div className="icon lg:hidden">三</div>
+          </div>
+          <div className="inline-flex items-center justify-between w-full py-2 border-b gap-x-10 lg:border-b-0">
+            <Search className="flex flex-grow gap-x-7" />
+            <div className="inline-flex items-center gap-x-4 pr-4">
+              <Signup />
+              <span className="hidden lg:block bg-gray-300 w-0.5 h-8" />
+              <Cart />
+            </div>
+          </div>
+        </div>
+      </header>
+    </>
+  )
+}

components/Lyouts/ClientLayout.js

@@ -1,9 +1,9 @@
-import { Navbar } from 'components'
+import { Header } from 'components'
 
 export default function Layout({ children }) {
   return (
     <>
-      <Navbar />
+      <Header />
       {children}
     </>
   )

components/Lyouts/ProfileLayout.js

@@ -1,27 +1,3 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-
-import { ClientLayout, ProfileAside } from 'components'
-import useVerify from '@/hooks/useVerify'
-
 export default function ProfileLayout({ children }) {
-  const isVerify = useVerify()
-  const router = useRouter()
-
-  if (!isVerify) router.push('/')
-  else
-    return (
-      <>
-        <ClientLayout />
-        <div className="lg:flex lg:gap-x-4 lg:px-3 lg:container lg:max-w-7xl">
-          <div className="hidden lg:block ">
-            <ProfileAside user={user} />
-          </div>
-          <div className="py-4 lg:py-8 lg:border  lg:border-gray-300 flex-1 lg:rounded-md lg:mt-6  h-fit">
-            {children}
-          </div>
-        </div>
-      </>
-    )
+  return <div>{children}</div>
 }

components/Search.js

@@ -1,15 +1,20 @@
 import { Icons } from 'components'
+
 export default function Search() {
+  //? Render(s)
   return (
-    <form className="flex-grow flex flex-row-reverse max-w-3xl rounded-md  bg-zinc-200/80">
-      <input
-        type="text"
-        placeholder="搜索"
-        className="text-right outline-none bg-transparent p-1 flex-grow "
-      />
-      <button className="p-2">
-        <Icons.Search className="icon" />
-      </button>
-    </form>
+    <>
+      <div className="flex flex-row flex-grow max-w-3xl rounded-md bg-zinc-200/80 ">
+        <input
+          disabled={true}
+          type="text"
+          placeholder="搜索"
+          className="flex-grow p-1 text-right bg-transparent outline-none cursor-pointer input"
+        />
+        <button className="p-2">
+          <Icons.Search className="icon text-gray-400" />
+        </button>
+      </div>
+    </>
   )
 }

components/Signup.js

@@ -0,0 +1,19 @@
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import { Icons } from '.'
+
+export default function Signup() {
+  const { asPath } = useRouter()
+  return (
+    <div className="flex-center text-sm gap-x-3 lg:border lg:border-gray-300 lg:rounded-md lg:py-2 lg:px-3">
+      <Link href={`/register?redirectTo=${asPath}`} className="hidden px-2 lg:block">
+        注册
+      </Link>
+      <span className="hidden lg:block lg:bg-gray-300 w-0.5 lg:h-6" />
+      <Link href={`/login?redirectTo=${asPath}`} className="flex-center gap-x-1">
+        登录
+        <Icons.Login className="icon" />
+      </Link>
+    </div>
+  )
+}

components/cart/Cart.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+import { Icons } from 'components'
+
+export default function Cart() {
+  return (
+    <>
+      <Link href="/">
+        <div className="relative">
+          <span className="absolute outline outline-2 bottom-3.5 left-5 bg-red-500 rounded-md w-5 h-5 p-0.5 text-center text-xs text-white farsi-digits">
+            0
+          </span>
+
+          <Icons.Cart className="icon h-7 w-7" />
+        </div>
+      </Link>
+    </>
+  )
+}

components/index.js

@@ -5,7 +5,6 @@ export { default as Loading } from './share/Loading'
 export { default as DisplayError } from './share/DisplayError'
 export { default as Navbar } from './Navbar'
 export { default as User } from './User'
-export { default as Cart } from './Cart'
 export { default as Search } from './Search'
 export { default as ClientLayout } from './Lyouts/ClientLayout'
 export { default as ProfileLayout } from './Lyouts/ProfileLayout'
@@ -16,3 +15,12 @@ export { default as ArrowLink } from './share/ArrowLink'
 export { default as BoxLink } from './share/BoxLink'
 export { default as BackButton } from './share/BackButton'
 export { default as ProfileAside } from './ProfileAside'
+
+export { default as Header } from './Header'
+export { default as Signup } from './Signup'
+
+//* SVGs
+export { default as Logo } from './svgs/logo.svg'
+
+//* CART COMPONENTS
+export { default as Cart } from './cart/Cart'

components/share/Icons.js

@@ -5,23 +5,65 @@ import {
   BsShieldExclamation,
   BsQuestionSquare,
   BsClockHistory,
+  BsSignpost,
+  BsSortDown,
+  BsShieldCheck,
+  BsFillXCircleFill,
 } from 'react-icons/bs'
-import { FiLogIn, FiLogOut, FiEdit, FiPlus } from 'react-icons/fi'
-import { VscThreeBars } from 'react-icons/vsc'
-import { HiOutlineUser } from 'react-icons/hi'
-import { IoSearch } from 'react-icons/io5'
+import { FiLogIn, FiLogOut, FiEdit, FiPlus, FiMinus } from 'react-icons/fi'
+import { VscThreeBars, VscLocation } from 'react-icons/vsc'
+import { HiOutlineUser, HiOutlineUsers } from 'react-icons/hi'
+import { IoSearch, IoImagesOutline } from 'react-icons/io5'
+import { BiAbacus, BiCategory } from 'react-icons/bi'
+import { TfiLayoutSlider } from 'react-icons/tfi'
+
 import {
   RiArrowDownSFill,
   RiArrowDropLeftLine,
+  RiArrowDropDownLine,
+  RiArrowDropUpLine,
+  RiArrowDropRightLine,
   RiArrowRightLine,
   RiHandbagLine,
   RiHeartLine,
   RiChat1Line,
   RiUserLocationLine,
   RiHome6Line,
+  RiCloseLine,
+  RiUserLocationFill,
+  RiPhoneFill,
+  RiDeleteBinLine,
+  RiStarFill,
+  RiSave2Line,
+  RiCheckboxCircleLine,
+  RiMore2Fill,
+  RiPencilRuler2Line,
+  RiWallet3Line,
+  RiTimeFill,
+  RiTwitterFill,
+  RiLinkedinFill,
+  RiInstagramFill,
+  RiYoutubeFill,
 } from 'react-icons/ri'
 
+import { CgSandClock } from 'react-icons/cg'
+
 const Icons = {
+  Twitter: RiTwitterFill,
+  Linkedin: RiLinkedinFill,
+  Instagram: RiInstagramFill,
+  Youtube: RiYoutubeFill,
+  Cross: BsFillXCircleFill,
+  Times: RiTimeFill,
+  Wallet: RiWallet3Line,
+  Rule: RiPencilRuler2Line,
+  More: RiMore2Fill,
+  ShieldCheck: BsShieldCheck,
+  Check: RiCheckboxCircleLine,
+  Filter: BiAbacus,
+  Save: RiSave2Line,
+  Star: RiStarFill,
+  Sort: BsSortDown,
   Eye: BsEye,
   EyeSlash: BsEyeSlash,
   Cart: BsCart2,
@@ -30,19 +72,34 @@ const Icons = {
   Exclamation: BsShieldExclamation,
   Bars: VscThreeBars,
   User: HiOutlineUser,
+  Users: HiOutlineUsers,
+  Category: BiCategory,
   Question: BsQuestionSquare,
   Search: IoSearch,
   ArrowDown: RiArrowDownSFill,
   ArrowLeft: RiArrowDropLeftLine,
+  ArrowDown: RiArrowDropDownLine,
+  ArrowUp: RiArrowDropUpLine,
   ArrowRight: RiArrowRightLine,
+  ArrowRight2: RiArrowDropRightLine,
   Edit: FiEdit,
   Clock: BsClockHistory,
+  Clock2: CgSandClock,
   Heart: RiHeartLine,
   Bag: RiHandbagLine,
   Comment: RiChat1Line,
   Location: RiUserLocationLine,
+  Location2: VscLocation,
   Home: RiHome6Line,
   Plus: FiPlus,
+  Minus: FiMinus,
+  Close: RiCloseLine,
+  UserLocation: RiUserLocationFill,
+  Post: BsSignpost,
+  Phone: RiPhoneFill,
+  Delete: RiDeleteBinLine,
+  Slider: TfiLayoutSlider,
+  Image: IoImagesOutline,
 }
 
 export default Icons