first commit

2025-07-21 05:51:52 -04:00
commit 7e28fc8f51
114 changed files with 23749 additions and 0 deletions
@@ -0,0 +1,33 @@
+import { Link, useLocation } from "react-router-dom"
+import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
+
+
+export default function FooterLinks({
+    linkName,
+    href,
+}) {
+
+  const {pathname} = useLocation()
+
+  const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
+
+  return (
+    <Link
+        to={href}
+        className={`${pathname == href && 'text-white-light/50'} block relative p-1 font-semibold text-sm lg:text-sm text-white-light before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-white-light hover:before:w-full hover:text-white-light/50`}
+        onClick={()=>{
+          if(subLinkIsActive){
+            setSubLinkIsActive((prev)=>{
+                if(prev == linkName){
+                    return null
+                }else{
+                    return linkName
+                }
+            })
+          }
+        }}
+    >
+        {linkName}
+    </Link>
+  )
+}
@@ -0,0 +1,34 @@
+import { Link, useLocation } from "react-router-dom"
+import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
+
+export default function NavLinks({
+    linkName,
+    href,
+}) {
+
+  const {pathname} = useLocation()
+
+  const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
+
+  return (
+    <Link
+        to={href}
+        className={`${pathname == href && 'text-brown/50'} block uppercase relative p-1 font-semibold text-sm lg:text-sm text-brown before:absolute before:left-0 before:top-full before:w-0 before:content-[''] before:h-[2px] before:bg-brown hover:before:w-full hover:text-brown/50`}
+        onClick={()=>{
+          if(subLinkIsActive){
+            setSubLinkIsActive((prev)=>{
+                // e.stopPropagation()
+                // console.log('bubble')
+                if(prev == linkName){
+                    return null
+                }else{
+                    return linkName
+                }
+            })
+          }
+        }}
+    >
+        {linkName}
+    </Link>
+  )
+}
@@ -0,0 +1,109 @@
+// import { useLocation } from "react-router-dom"
+import NavLinks from "./NavLinks"
+import { layoutDefaultContext } from "../../context/DefaultLayoutContext"
+
+
+export default function NavLinksWithSubLinks({
+    linkName,
+    subLink=[],
+    asLink=true,
+}) {
+
+//   const {pathname} = useLocation()
+  const {subLinkIsActive, setSubLinkIsActive} = layoutDefaultContext() // CONTEXT TO GET WHEN A SUBLINK IS CLICKED
+
+  return (
+    // <Link
+    //     to={''}
+    //     className="z-[999] relative p-1 font-semibold text-sm lg:text-lg text-brown"
+    // >
+    //     <span className="flex gap-1 items-center">
+    //         {linkName}
+    //         <i className="fa-solid fa-caret-up rotate-180"></i>
+    //     </span>
+    //     {/* sub links section */}
+    //     <div className="py-3 absolute top-[60px] w-48 rounded-md bg-white-light">
+    //         {subLink.map(item => (
+    //             <div className="w-full px-2 py-1">
+    //                 <NavLinks
+    //                     linkName={item.linkName}
+    //                     href={item.link}
+    //                 />
+    //             </div>
+    //         ))}
+    //     </div>
+    // </Link>
+
+    <>
+        {asLink ? 
+        <button
+            className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
+            onClick={()=>setSubLinkIsActive((prev)=>{
+                // e.stopPropagation()
+                // console.log('bubble')
+                if(prev == linkName){
+                    return null
+                }else{
+                    return linkName
+                }
+            })}
+        >
+            <span className="flex gap-1 items-center">
+                {linkName}
+                <i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
+            </span>
+            {/* sub links section */}
+            <div 
+                className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}
+                onClick={()=>setSubLinkIsActive((prev)=>{
+                    // e.stopPropagation()
+                    // console.log('bubble')
+                    if(prev == linkName){
+                        return null
+                    }else{
+                        return linkName
+                    }
+                })}
+            >
+                {subLink.map(item => (
+                    <div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
+                        <NavLinks
+                            linkName={item.linkName}
+                            href={item.link}
+                        />
+                    </div>
+                ))}
+            </div>
+        </button>
+        :
+        <button
+        className={`${(subLinkIsActive && subLinkIsActive == linkName) && 'text-brown/50'} z-[999] uppercase relative text-left p-1 font-semibold text-sm lg:text-sm text-brown hover:text-brown/50`}
+        onClick={()=>setSubLinkIsActive((prev)=>{
+            if(prev == linkName){
+                return null
+            }else{
+                return linkName
+            }
+        })}
+    >
+        <span className="flex gap-1 items-center">
+            {linkName}
+            <i className={`fa-solid fa-caret-up ${(subLinkIsActive && subLinkIsActive == linkName) ? 'rotate-0' : 'rotate-180'}`}></i>
+        </span>
+        {/* sub links section */}
+        <div className={`p-0 overflow-hidden absolute top-[55px] w-48 rounded-md bg-white-light shadow-md ${(subLinkIsActive && subLinkIsActive == linkName) && 'p-3'}`}>
+            {subLink.map(item => (
+                <div key={item.linkName} className={`w-full h-0 overflow-hidden px-2 ${(subLinkIsActive && subLinkIsActive == linkName) && 'h-10'}`}>
+                    {/* <NavLinks
+                        linkName={item.linkName}
+                        href={item.link}
+                    /> */}
+                    coming soon
+                </div>
+            ))}
+        </div>
+        </button>
+        }
+    </>
+  )
+}