Merge branch '14-categories' of https://github.com/Dium-dev/landingAT…

…C_Front-end into 14-categories

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -9,11 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@types/react-star-ratings": "^2.3.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "next": "14.1.0",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-fast-marquee": "^1.6.4",
     "react-icons": "^5.0.1",
-    "react-image-gallery": "^1.3.0"
+    "react-image-gallery": "^1.3.0",
+    "react-star-ratings": "^2.3.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

src/actions/reviews.ts

@@ -0,0 +1,11 @@
+"use server";
+
+export const getReviews = async () => {
+  try {
+    const response = await fetch("http://localhost:3005/reviews");
+    const { data } = await response.json();
+    return data;
+  } catch (_) {
+    return [];
+  }
+};

src/app/(nav-bar)/index.tsx

@@ -0,0 +1,93 @@
+'use client'
+import { Button } from '@/components/button'
+import Image from 'next/image'
+import { HiBars3 } from 'react-icons/hi2'
+import { ContactIcon, ShoppingCartIcon } from '@/assets/icons'
+import { MobileMenu } from './mobile-menu'
+import { useState } from 'react'
+import { ThemeModeButton } from '@/components/theme-mode'
+import { CgChevronDown } from 'react-icons/cg'
+
+const routes = [
+  {
+    label: 'Productos',
+    url: '/products',
+    sub: [
+      {
+        label: 'Farola',
+        to: 'farolas',
+      },
+      {
+        label: 'Luces',
+        to: 'farolas',
+      },
+    ],
+  },
+  { label: 'Como comprar', url: '/how-to-buy' },
+  { label: 'Blog', url: 'https://actualizatucarro.blogspot.com' },
+  { label: 'Nosotros', url: '/about-us' },
+]
+
+export function NavBar() {
+  const [open, setOpen] = useState(false)
+  const handleOPen = () => setOpen((cur) => !cur)
+
+  return (
+    <nav className="text-text-lm sticky top-0 z-40 backdrop-blur-sm px-4 py-6 justify-between flex items-center bg-background-lm/90 dark:bg-background-dm/90 shadow-md dark:text-text-dm">
+      <MobileMenu
+        buttonValue={<HiBars3 className="w-full h-full" />}
+        open={open}
+        handleOPen={handleOPen}
+      />
+      <Image
+        className="absolute right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2 ms:relative ms:right-0 ms:translate-x-0 ms:top-0 ms:-translate-y-0 md:hidden"
+        src="./icons/logoActualizatucarroM.svg"
+        alt="Actualiza tu carro logotipo"
+        width={50}
+        height={50}
+      />
+      <Image
+        src="./icons/logoActualizatucarroD.svg"
+        width={200}
+        height={30}
+        alt="Your Company"
+        onClick={() => {}}
+        className="hidden md:block"
+      />
+
+      <ul className="ms:flex gap-3 mx-auto hidden">
+        {routes.map(({ label, sub }) => (
+          <li className="relative group" key={label}>
+            <Button className="flex items-center gap-2 relative">
+              {' '}
+              {label}
+              {sub?.length && <CgChevronDown className="w-5 h-5 -mr-2" />}
+            </Button>
+            {sub?.length && (
+              <div
+                style={{ animation: 'popover-ani 0.5s alternate' }}
+                className="hidden -z-10 absolute left-1/2 -translate-x-1/2 w-full top-full group-hover:block"
+              >
+                <main style={{
+                  zIndex: '-1000'
+                }} className="bg-background-lm ring-1 ring-primary-dm/5 leading-3 mt-6 rounded px-3 py-4 shadow dark:bg-background-dm">
+                  {sub.map((_a, i) => (
+                    <Button key={i} className="w-full text-start text-primary-dm">
+                      {_a.label}
+                    </Button>
+                  ))}
+                </main>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <ContactIcon className="w-10 h-full hidden ml-auto ms:block mr-2" />
+      <div className="hidden ms:block">
+        <ThemeModeButton />
+      </div>
+      <ShoppingCartIcon className="w-10 p-0.5 h-full hover:bg-primary-dm/20 rounded relative  transition-all ease-in-out" />
+    </nav>
+  )
+}

src/app/(nav-bar)/mobile-menu.tsx

@@ -0,0 +1,163 @@
+import Image from 'next/image'
+import { useEffect, type ReactNode, useState } from 'react'
+
+import { ToggleTheme } from '@/components/theme-mode'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/button'
+import { FiChevronDown } from 'react-icons/fi'
+import { HiOutlineX } from 'react-icons/hi'
+import Link from 'next/link'
+
+interface Props {
+  buttonValue: ReactNode
+  open: boolean
+  handleOPen(): void
+}
+
+export function MobileMenu({ buttonValue, open, handleOPen }: Props) {
+  const [curIndex, setCurIndex] = useState(0)
+  const handleCurIndex = (index: number) => setCurIndex(index ? index : 0)
+  const route = useRouter()
+  const routes = [
+    {
+      label: 'Productos',
+      url: '/products',
+      sub: [
+        {
+          label: 'Farola',
+          to: 'farolas',
+        },
+        {
+          label: 'Luces',
+          to: 'farolas',
+        },
+      ],
+    },
+    { label: 'Como comprar', url: '/how-to-buy' },
+    { label: 'Blog', url: 'https://actualizatucarro.blogspot.com' },
+    { label: 'Nosotros', url: '/about-us' },
+  ]
+
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : ''
+  }, [open])
+
+  return (
+    <>
+      <button className="w-10 p-1 ms:hidden" onClick={handleOPen}>
+        {buttonValue}
+      </button>
+      {open && (
+        <div
+          className="fixed top-0 left-0 h-screen bg-background-dm/70 w-full z-[60] ms:hidden"
+          onClick={handleOPen}
+        >
+          <div
+            style={{
+              animation: '1s mobile-menu-animate',
+            }}
+            className="h-full bg-background-lm max-w-[290px] p-3 gap-5 flex flex-col dark:bg-background-dm transition-all ease-in-out"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <header className="flex items-center justify-between">
+              <Image
+                src={'./icons/logoActualizatucarroD.svg'}
+                width={200}
+                height={30}
+                alt="Your Company"
+                onClick={() => route.back()}
+              />
+              <button
+                className="w-9 aspect-square"
+                onClick={() => {
+                  handleOPen()
+                }}
+              >
+                <HiOutlineX className="w-full h-full" />
+              </button>
+            </header>
+            <ul className="flex-1 space-y-3">
+              {routes.map(({ label, url, sub }) => (
+                <li
+                  className="transition-all ease-in-out"
+                  key={label}
+                  onClick={() => route.push(url)}
+                >
+                  <div className="flex items-center">
+                    <Button className="w-4/5 text-start">{'' + label}</Button>
+                    {sub && (
+                      <Button
+                        className="w-1/5"
+                        onClick={(evt) => {
+                          evt.stopPropagation()
+                          handleCurIndex(curIndex === 1 ? 0 : 1)
+                        }}
+                      >
+                        <FiChevronDown className="w-full h-full" />
+                      </Button>
+                    )}
+                  </div>
+
+                  {sub && (
+                    <Accordion index={1} current={curIndex} values={sub} />
+                  )}
+                </li>
+              ))}
+              <div className="pt-6">
+                <hr className="border-secondary-dm/50 pb-6" />
+                <p className="pl-3 flex items-center justify-between font-medium">
+                  Apariencia: {<ToggleTheme />}
+                </p>
+              </div>
+            </ul>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+interface AccordionProps {
+  index: number
+  current: number
+  values: Array<{
+    label: string
+    to: string
+  }>
+}
+
+function Accordion({ index, current, values }: AccordionProps) {
+  return (
+    <div
+      className={`${
+        index === current ? 'h-auto' : 'h-0'
+      } overflow-hidden ml-4 transition-all ease-in-out`}
+    >
+      {values.map(({ label }, i) => (
+        <Link href={`/products?category=${label}`} key={i} className="block">
+          {label}
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+function AvatarProfile({ image, name }: { image: string; name: string }) {
+  return (
+    <div className="flex box-content">
+      <Image
+        src={'./images/logo/logoM.svg'}
+        width={50}
+        height={50}
+        alt={name}
+        className="border rounded-full"
+      />
+      <Button className="flex flex-col line-clamp-1">
+        <span title={name} className="whitespace-nowrap line-clamp-1 w-full">
+          {name.length > 21 ? name.slice(0, 21) + '...' : name}
+        </span>
+        <span className="text-xs font-normal">Ver Perfil</span>
+      </Button>
+    </div>
+  )
+}

src/app/globals.css

@@ -1,3 +1,82 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+body,
+html,
+:root {
+  height: 100%;
+}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}