From fd8d16b0b90005a3713ad31d8ce6df0e940660ac Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Thu, 14 Sep 2023 17:10:06 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Implemented=20new=20UI=20compone?=
 =?UTF-8?q?nts=20=F0=9F=9A=80=20Enhanced=20user=20experience=20?=
 =?UTF-8?q?=F0=9F=8C=9F=20Added=20initial=20data=20handling=20logic=20?=
 =?UTF-8?q?=F0=9F=92=A1=20Improved=20code=20readability=20and=20organizati?=
 =?UTF-8?q?on=20=F0=9F=9B=A0=EF=B8=8F=20Fixed=20minor=20styling=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../account-savelists/page.tsx                | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/app/(account-pages)/account-savelists/page.tsx

diff --git a/src/app/(account-pages)/account-savelists/page.tsx b/src/app/(account-pages)/account-savelists/page.tsx
new file mode 100644
index 0000000..05905d4
--- /dev/null
+++ b/src/app/(account-pages)/account-savelists/page.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { Tab } from "@headlessui/react";
+import CarCard from "@/components/CarCard";
+import ExperiencesCard from "@/components/ExperiencesCard";
+import StayCard from "@/components/StayCard";
+import {
+  DEMO_CAR_LISTINGS,
+  DEMO_EXPERIENCES_LISTINGS,
+  DEMO_STAY_LISTINGS,
+} from "@/data/listings";
+import React, { Fragment, useState } from "react";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+
+const AccountSavelists = () => {
+  let [categories] = useState(["Stays", "Experiences", "Cars"]);
+
+  const renderSection1 = () => {
+    return (
+      <div className="space-y-6 sm:space-y-8">
+        <div>
+          <h2 className="text-3xl font-semibold">Save lists</h2>
+        </div>
+        <div className="w-14 border-b border-neutral-200 dark:border-neutral-700"></div>
+
+        <div>
+          <Tab.Group>
+            <Tab.List className="flex space-x-1 overflow-x-auto">
+              {categories.map((item) => (
+                <Tab key={item} as={Fragment}>
+                  {({ selected }) => (
+                    <button
+                      className={`flex-shrink-0 block !leading-none font-medium px-5 py-2.5 text-sm sm:text-base sm:px-6 sm:py-3 capitalize rounded-full focus:outline-none ${
+                        selected
+                          ? "bg-secondary-900 text-secondary-50 "
+                          : "text-neutral-500 dark:text-neutral-400 dark:hover:text-neutral-100 hover:text-neutral-900 hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                      } `}
+                    >
+                      {item}
+                    </button>
+                  )}
+                </Tab>
+              ))}
+            </Tab.List>
+            <Tab.Panels>
+              <Tab.Panel className="mt-8">
+                <div className="grid grid-cols-1 gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                  {DEMO_STAY_LISTINGS.filter((_, i) => i < 8).map((stay) => (
+                    <StayCard key={stay.id} data={stay} />
+                  ))}
+                </div>
+                <div className="flex mt-11 justify-center items-center">
+                  <ButtonSecondary>Show me more</ButtonSecondary>
+                </div>
+              </Tab.Panel>
+              <Tab.Panel className="mt-8">
+                <div className="grid grid-cols-1 gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                  {DEMO_EXPERIENCES_LISTINGS.filter((_, i) => i < 8).map(
+                    (stay) => (
+                      <ExperiencesCard key={stay.id} data={stay} />
+                    )
+                  )}
+                </div>
+                <div className="flex mt-11 justify-center items-center">
+                  <ButtonSecondary>Show me more</ButtonSecondary>
+                </div>
+              </Tab.Panel>
+              <Tab.Panel className="mt-8">
+                <div className="grid grid-cols-1 gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                  {DEMO_CAR_LISTINGS.filter((_, i) => i < 8).map((stay) => (
+                    <CarCard key={stay.id} data={stay} />
+                  ))}
+                </div>
+                <div className="flex mt-11 justify-center items-center">
+                  <ButtonSecondary>Show me more</ButtonSecondary>
+                </div>
+              </Tab.Panel>
+            </Tab.Panels>
+          </Tab.Group>
+        </div>
+      </div>
+    );
+  };
+
+  return renderSection1();
+};
+
+export default AccountSavelists;