feat: resturant details page

WebmasterCamp · Jul 16, 2023 · d99cd35 · d99cd35
1 parent e67a940
commit d99cd35
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 0 deletions.
diff --git a/public/assets/vegano.jpg b/public/assets/vegano.jpg
diff --git a/src/components/Tab.tsx b/src/components/Tab.tsx
@@ -0,0 +1,50 @@
+import { LayoutGroup, motion } from "framer-motion";
+import { type FC, useState } from "react";
+
+import { twMerge } from "tailwind-merge";
+
+export const Tab: FC<{
+  tabs: string[];
+  selectedTab: string;
+  onChangeTab: (newTab: string) => void;
+  className?: string;
+  id: string;
+}> = ({ id, tabs, onChangeTab, selectedTab, className }) => {
+  return (
+    <LayoutGroup id={id}>
+      <ul className={twMerge("flex h-fit items-end gap-6 text-sm", className)}>
+        {tabs.map((item) => (
+          <li
+            key={item}
+            className={twMerge(
+              "text-light-grey-600  dark:text-light-grey-600 h-fit cursor-pointer",
+              item === selectedTab &&
+                "text-shadow-bold  pb-0 font-semibold text-primary-main",
+              item !== selectedTab && "pb-[10px]"
+            )}
+            onClick={() => onChangeTab(item)}
+          >
+            {item}
+            {item === selectedTab ? (
+              <motion.div
+                className=" border-b-4 border-primary-main pt-[6px]"
+                layoutId="underline"
+              />
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </LayoutGroup>
+  );
+};
+
+export default function useTabs(defaultValues?: string) {
+  const [currentTab, setCurrentTab] = useState(defaultValues || "");
+  return {
+    currentTab,
+    onChangeTab: (newValue: string) => {
+      setCurrentTab(newValue);
+    },
+    setCurrentTab,
+  };
+}
diff --git a/src/pages/restaurants/[id]/index.tsx b/src/pages/restaurants/[id]/index.tsx
@@ -0,0 +1,82 @@
+import { CardRestaurant } from "@ywc19/components/CardRestaurant";
+import { Caruosel } from "@ywc19/components/Caruosel";
+import { SwiperSlide } from "swiper/react";
+import Head from "next/head";
+import { CardMenu } from "@ywc19/components/CardMenu";
+import { LazyImage } from "@ywc19/components/LazyImage";
+import { type INavbarProps, Navbar } from "@ywc19/components/Navbar";
+import { Footer } from "@ywc19/components/Footer";
+import useTabs, { Tab } from "@ywc19/components/Tab";
+
+export default function Home() {
+  const mock = [1, 2, 3, 4, 5, 6, 7, 8];
+  const tabs = [
+    "รายละเอียด",
+    "เนื้อหาในบทเรียน",
+    "สิ่งที่จะได้เรียนรู้",
+    "รีวิว",
+  ];
+  const { currentTab, onChangeTab } = useTabs(tabs[0]);
+  const menu: INavbarProps["data"] = [
+    {
+      name: "Home",
+      href: "#",
+    },
+    {
+      name: "About",
+      href: "#",
+    },
+    {
+      name: "Contact",
+      href: "#",
+    },
+    {
+      name: "Service",
+      href: "#",
+    },
+  ];
+  return (
+    <>
+      <Head>
+        <title>Create T3 App</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main className="flex min-h-screen flex-col items-center justify-center ">
+        <Navbar data={menu} />
+        <div className="h-[656px] w-full bg-[url('/assets/vegano.jpg')]  bg-cover bg-center bg-no-repeat px-[140px] pt-[368px]" />
+        <div className="container  flex flex-col items-center justify-center gap-12 px-4 pb-16 ">
+          <div className="mt-10 w-full">
+            <p className="text-h2 font-bold">VEGANO - Italian Vegan Eatery</p>
+            <p className="mb-[250px] text-h4 font-semibold">
+              Vegan food made yummy and healthy!
+            </p>
+          </div>
+          <Tab
+            tabs={[
+              "รายละเอียด",
+              "เนื้อหาในบทเรียน",
+              "สิ่งที่จะได้เรียนรู้",
+              "รีวิว",
+            ]}
+            selectedTab={currentTab}
+            onChangeTab={onChangeTab}
+            id="tab-transaction-details"
+            className="w-full justify-start gap-x-[30px]"
+          />
+          <div>
+            <p className="mb-6 mt-[58px] text-h3 font-bold">
+              Hot plate for you
+            </p>
+            <div className="grid grid-cols-4 gap-6">
+              {mock.map((item) => (
+                <CardMenu key={item} />
+              ))}
+            </div>
+          </div>
+        </div>
+        <Footer data={menu} />
+      </main>
+    </>
+  );
+}