add: bottom nav bar

2025-07-04 14:03:41 +03:30
parent 76ecb5839e
commit 691dc7c100
17 changed files with 368 additions and 122 deletions
@@ -0,0 +1,86 @@
+import React from 'react'
+import BottomNavLink from './BottomNavLink'
+import BottomNavHighlightLink from './BottomNavLinkBig'
+import HomeHashtagIcon from '../icons/HomeHashtagIcon'
+import PagerIcon from '../icons/PagerIcon'
+import NotifiBoardIcon from '../icons/NotifBoardIcon'
+import BagIcon from '../icons/BagIcon'
+import HeartIcon from '../icons/HeartIcon'
+
+type Props = object
+
+function BottomNavBar({ }: Props) {
+  return (
+    <div className="absolute bottom-0 left-0 w-full bg-transparent">
+      <div className="max-w-md mx-auto w-full aspect-[436/104] relative z-40">
+        <svg
+          viewBox="0 0 436 104"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="w-full h-full block"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g filter="url(#filter0_d_9095_18036)">
+            <path
+              d="M218 16C229.034 16 238.711 22.0313 244.148 31.0943C245.844 33.9222 248.724 36 252.022 36H406C414.837 36 422 43.1634 422 52V80C422 88.8366 414.837 96 406 96H30C21.1634 96 14 88.8366 14 80V52C14 43.1634 21.1634 36 30 36H183.979C187.277 36 190.157 33.9222 191.853 31.0943C197.29 22.0315 206.966 16.0001 218 16Z"
+              fill="white"
+            />
+          </g>
+
+          {/* 🔽 Your HTML content inside SVG */}
+          <foreignObject x="0" y="10" width="100%" height="80">
+            <div
+              className="absolute z-20 w-full h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
+            >
+              <BottomNavLink href={'/auth'} icon={<HeartIcon />} value="پسند ها" />
+              <BottomNavLink href={''} icon={<NotifiBoardIcon />} value="اعلان ها" />
+              <BottomNavHighlightLink href={''} icon={<HomeHashtagIcon />} value="منو" />
+              <BottomNavLink href={''} icon={<PagerIcon />} value="پیجر" />
+              <BottomNavLink href={''} icon={<BagIcon />} value="سبد خرید" />
+            </div>
+          </foreignObject>
+
+          <defs>
+            <filter
+              id="filter0_d_9095_18036"
+              x="0"
+              y="0"
+              width="100%"
+              height="100%"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <feColorMatrix
+                in="SourceAlpha"
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                result="hardAlpha"
+              />
+              <feOffset dy="-2" />
+              <feGaussianBlur stdDeviation="7" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <feColorMatrix
+                type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow_9095_18036"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_dropShadow_9095_18036"
+                result="shape"
+              />
+            </filter>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export default BottomNavBar
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+import React from 'react'
+import type { LinkProps } from 'next/link'
+
+type Props = {
+  icon: React.ReactElement
+  value: string
+} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+function BottomNavLink({ icon, value, ...restProps }: Props) {
+  return (
+    <Link {...restProps} className={`flex flex-col justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
+      {icon}
+      <span className='text-xs2 text-disabled-text'>
+        {value}
+      </span>
+    </Link>
+  )
+}
+
+export default BottomNavLink
@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import React from 'react'
+import type { LinkProps } from 'next/link'
+
+type Props = {
+  icon: React.ReactElement
+  value: string
+} & LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+function BottomNavHighlightLink({ icon, value, ...restProps }: Props) {
+  return (
+    <Link {...restProps} className={`flex flex-col relative justify-arround items-center gap-[5px] ${restProps.className ?? ''}`}>
+      <div className='bg-primary p-3 rounded-full'>
+        {icon}
+      </div>
+      <span className='text-xs2 text-disabled-text'>
+        {value}
+      </span>
+    </Link>
+  )
+}
+
+export default BottomNavHighlightLink