start calibration

Ayothegod · Jul 27, 2024 · 4c37726 · 4c37726
1 parent 12fa555
commit 4c37726
Show file tree

Hide file tree

Showing 28 changed files with 2,876 additions and 43 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,8 @@ node_modules
 /.cache
 /build
 .env
+
+
+prisma/dev.db
+prisma/dev.db-journal
+prisma/migrations
diff --git a/app/components/build/DealsCountdown.tsx b/app/components/build/DealsCountdown.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+
+const CountdownTimer = ({ targetDate }: any) => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date(targetDate) - +new Date();
+    let timeLeft: any = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  });
+
+  return (
+    <aside className="flex justify-between ">
+      <div className="flex flex-col items-center">
+        <span className="border p-4 rounded-md font-mono text-2xl">
+          {timeLeft.days > 0 ? timeLeft.days : 0}
+        </span>
+        <p className="font-medium text-neutral-600">Days</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <span className="border p-4 rounded-md font-mono text-2xl">
+          {timeLeft.hours > 0 ? timeLeft.hours : 0}
+        </span>
+        <p className="font-medium text-neutral-600">Hrs</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <span className="border p-4 rounded-md font-mono text-2xl">
+          {timeLeft.minutes > 0 ? timeLeft.minutes : 0}
+        </span>
+        <p className="font-medium text-neutral-600">Mins</p>
+      </div>
+      <div className="flex flex-col items-center">
+        <span className="border p-4 rounded-md font-mono text-2xl">
+          {timeLeft.seconds > 0 ? timeLeft.seconds : 0}
+        </span>
+        <p className="font-medium text-neutral-600">Sec</p>
+      </div>
+    </aside>
+  );
+};
+
+const DealsCountdown = () => {
+  const targetDate = new Date("2024-04-19T23:59:59");
+
+  return (
+    <div>
+      <CountdownTimer targetDate={targetDate} />
+    </div>
+  );
+};
+
+export default DealsCountdown;
diff --git a/app/components/build/DealsOfTheMonth.tsx b/app/components/build/DealsOfTheMonth.tsx
@@ -0,0 +1,61 @@
+import Autoplay from "embla-carousel-autoplay";
+import * as React from "react";
+import { imageCarouselArray } from "../../lib/database";
+import { Carousel, CarouselContent, CarouselItem } from "../ui/carousel";
+import DealsCountdown from "./DealsCountdown";
+import { Button } from "../ui/button";
+
+export default function DealsOfTheMonth() {
+  const plugin = React.useRef(
+    Autoplay({ delay: 2000 }) // stopOnInteraction: true
+  );
+
+  return (
+    <div className="pageStyle mt-8 mb-16 flex flex-col md:flex-row gap-8">
+      {/*  */}
+      <div className="w-full md:w-[40%] flex flex-col space-y-3">
+        <h2 className="text-2xl sm:text-3xl md:text-2xl font-serif font-bold tracking-wide">
+          Deals Of The Month
+        </h2>
+        <p className="text-sm text-neutral-600 leading-6 tracking-light">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni,
+          corrupti repellat fugit corporis fugiat ab repellendus modi incidunt
+          nulla at.
+        </p>
+        <Button className="w-full sm:w-fit sm:px-8">Buy Now</Button>
+
+        <div className="">
+          <h4 className="font-medium text-lg text-neutral-600 mt-4">
+            Hurry, Before it's Too Late!
+          </h4>
+          <DealsCountdown />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-center md:w-[60%]">
+        <Carousel
+          plugins={[plugin.current]}
+          className="w-full "
+          onMouseEnter={plugin.current.stop}
+          onMouseLeave={plugin.current.reset}
+        >
+          <CarouselContent>
+            {imageCarouselArray.map((_, index) => (
+              <CarouselItem key={index} className="md:basis-1/2">
+                <div className="">
+                  <img
+                    src={_.src}
+                    alt={_.alt}
+                    className="w-full object-cover h-96 object-top"
+                  />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          {/* <CarouselPrevious />
+          <CarouselNext /> */}
+        </Carousel>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/build/Filters.tsx b/app/components/build/Filters.tsx
@@ -0,0 +1,60 @@
+import { Button } from "../ui/button";
+
+
+export default function Filters() {
+  return (
+    <section className="space-y-6 mt-8">
+      <div className="space-y-2">
+        <h4 className="text-xs font-serif font-bold tracking-wide">Size</h4>
+        <div className="flex items-center justify-between">
+          <Button variant="outline" size="sm">
+            S
+          </Button>
+          <Button variant="outline" size="sm">
+            M
+          </Button>
+          <Button variant="outline" size="sm">
+            L
+          </Button>
+          <Button variant="outline" size="sm">
+            XL
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h4 className="text-xs font-serif font-bold tracking-wide">Prices</h4>
+        <div className="space-y-2">
+          <p className="text-sm text-medium">$0 - $49</p>
+          <p className="text-sm text-medium">$50 - $99</p>
+          <p className="text-sm text-medium">$100 - $199</p>
+          <p className="text-sm text-medium">$200 - $*</p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h4 className="text-xs font-serif font-bold tracking-wide">
+          Collections
+        </h4>
+        <div className="space-y-2">
+          <p className="text-sm text-medium">All products</p>
+          <p className="text-sm text-medium">Best sellers</p>
+          <p className="text-sm text-medium">New arrivals</p>
+          <p className="text-sm text-medium">Accessories</p>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h4 className="text-xs font-serif font-bold tracking-wide">Tags</h4>
+        <div className="flex gap-2 flex-wrap">
+          <span className="text-sm text-medium">Fashion</span>
+          <span className="text-sm text-medium">Belt</span>
+          <span className="text-sm text-medium">Sandals</span>
+          <span className="text-sm text-medium">Bags</span>
+          <span className="text-sm text-medium">Sunglasses</span>
+          <span className="text-sm text-medium">Beachwear</span>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/build/FollowUs.tsx b/app/components/build/FollowUs.tsx
@@ -0,0 +1,30 @@
+import { imageNumbers } from "../../lib/database";
+
+imageNumbers
+
+export default function FollowUs() {
+  return (
+    <section className="mt-8 mb-16 px-4">
+      <div className="text-center">
+        <h2 className="text-2xl sm:text-3xl md:text-2xl font-serif font-bold tracking-wide">
+          Follow Us On Instagram
+        </h2>
+        <p>
+          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas
+          delectus vel dolor in ex nobis sint itaque vitae, minus saepe?
+        </p>
+      </div>
+
+      <div className="flex overflow-x-scroll scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-200 rounded-md py-4">
+        {imageNumbers.map((image, index) => (
+          <img
+            key={index}
+            src={`https://picsum.photos/200/${index % 2 === 0 ? '200' : '300'}?random&format=png`}
+            alt="image alts"
+            className="object-contain"
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/build/Footer.tsx b/app/components/build/Footer.tsx
@@ -0,0 +1,36 @@
+import { Copyright } from "lucide-react";
+import IsAuthPage from "../utils/IsAuthPage";
+import { navLink } from "../../lib/database";
+import { stateStore } from "~/lib/store";
+
+export default function Footer() {
+  const year = new Date().getFullYear();
+  const user = stateStore((state: any) => state.isUser);
+
+  return (
+    <IsAuthPage>
+      <footer className="pageStyle pb-6">
+        <div className=" flex flex-col md:flex-row  justify-between ">
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold tracking-wide">
+            FASCO
+          </h1>
+          <ul className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 mt-4 md:mt-0">
+            {navLink.map((link, idx) => (
+              <p
+                key={idx}
+                className="text-sm md:text-base font-medium text-neutral-600"
+              >
+                {user && !link.withUser && <a href={link.href}>{link.name}</a>}
+              </p>
+            ))}
+          </ul>
+        </div>
+
+        <div className="flex items-center justify-center text-sm text-neutral-600 mt-6">
+          Copyright <Copyright className="h-4 w-4" /> {year}. All Rights
+          Reserved.
+        </div>
+      </footer>
+    </IsAuthPage>
+  );
+}
diff --git a/app/components/build/Header.tsx b/app/components/build/Header.tsx
@@ -0,0 +1,44 @@
+import { Suspense } from "react";
+import { navLink, loggedInIcons } from "../../lib/database";
+import { Button } from "../ui/button";
+import IsAuthPage from "../utils/IsAuthPage";
+import { IsLoggedIn } from "../utils/IsLoggedIn";
+import { Await } from "@remix-run/react";
+
+export default function Header({ user }: any) {
+  return (
+    <>
+      <header className="pageStyle flex items-center justify-between py-6">
+        <IsLoggedIn>
+          <h1 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold tracking-wide">
+            FASCO
+          </h1>
+        </IsLoggedIn>
+        {user ? <p>There User</p> : <p>Null</p>}
+
+        <IsAuthPage>
+          <nav className=" contents">
+            <ul className="hidden md:flex items-center gap-8">
+              {navLink.map((link, idx) => (
+                <p key={idx} className="text-sm md:text-base">
+                  {user && link.withUser && <a href={link.href}>{link.name}</a>}
+                  {!user && !link.withUser && (
+                    <a href={link.href}>{link.name}</a>
+                  )}
+                </p>
+              ))}
+            </ul>
+
+            {user && (
+              <div className="flex gap-4 md:gap-8">
+                {loggedInIcons.map((icon, id) => (
+                  <div key={id}>{user ? <icon.icon /> : null}</div>
+                ))}
+              </div>
+            )}
+          </nav>
+        </IsAuthPage>
+      </header>
+    </>
+  );
+}