feat: add faqs section

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
2025-05-12 20:57:51 +00:00 · 2024-06-14 16:50:46 +07:00 · 2024-06-14 16:50:46 +07:00 · c5af5b3069
commit c5af5b3069
parent a27b02f953
8 changed files with 59 additions and 44 deletions
--- a/app/globals.css
+++ b/app/globals.css
@ -13,3 +13,16 @@ input,
 button {
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
 }
+
+@layer utilities {
+  /* Hide scrollbar for WebKit browsers */
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for Firefox */
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    scrollbar-width: none; /* Firefox */
+  }
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -35,7 +35,7 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={GeistSans.variable}>
-      <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
+      <body className="bg-white text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
        <header>
          <Banner />
          <Navbar />
--- a/app/page.tsx
+++ b/app/page.tsx
@ -34,7 +34,7 @@ export default async function HomePage() {
          <WhyChoose />
        </Suspense>
        <Suspense>
-          <FAQ />
+          <FAQ handle="home-page-faqs" />
        </Suspense>
        <Suspense>
          <Manufacturers />
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@ -59,7 +59,7 @@ async function CategoryPage({
        <MobileFilters filters={filters} menu={<SubMenu collection={params.collection} />} />
        <SortingMenu />
      </div>
-      <Grid className="grid-cols-1 sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
+      <Grid className="hide-scrollbar max-h-[1000px] grid-cols-1 overflow-y-auto sm:grid-cols-2 sm:gap-x-8 lg:grid-cols-3">
        {products.length === 0 ? (
          <p className="py-3 text-lg">{`No products found in this collection`}</p>
        ) : (
@ -81,38 +81,43 @@ export default async function CategorySearchPage(props: {
  searchParams?: { [key: string]: string | string[] | undefined };
 }) {
  return (
-    <div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
-      <aside className="hidden lg:block">
-        <div className="mb-5">
-          <Suspense fallback={<YMMFiltersPlaceholder />}>
-            <YMMFilters />
+    <>
+      <div className="grid lg:grid-cols-3 lg:gap-x-10 xl:grid-cols-4">
+        <aside className="hidden lg:block">
+          <div className="mb-5">
+            <Suspense fallback={<YMMFiltersPlaceholder />}>
+              <YMMFilters />
+            </Suspense>
+          </div>
+
+          <SubMenu collection={props.params.collection} />
+          <h3 className="sr-only">Filters</h3>
+          <Suspense
+            fallback={<FiltersListPlaceholder />}
+            key={`filters-${props.params.collection}`}
+          >
+            <FiltersContainer searchParams={props.searchParams} />
+            <HelpfulLinks collection={props.params.collection} />
+          </Suspense>
+        </aside>
+        <div className="lg:col-span-2 xl:col-span-3">
+          <div className="mb-2">
+            <Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
+              <Breadcrumb type="collection" handle={props.params.collection} />
+            </Suspense>
+          </div>
+          <Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
+            <Header collection={props.params.collection} />
+          </Suspense>
+
+          <Suspense
+            fallback={<ProductsGridPlaceholder />}
+            key={`products-${props.params.collection}`}
+          >
+            <CategoryPage {...props} />
          </Suspense>
        </div>
-
-        <SubMenu collection={props.params.collection} />
-        <h3 className="sr-only">Filters</h3>
-        <Suspense fallback={<FiltersListPlaceholder />} key={`filters-${props.params.collection}`}>
-          <FiltersContainer searchParams={props.searchParams} />
-          <HelpfulLinks collection={props.params.collection} />
-        </Suspense>
-      </aside>
-      <div className="lg:col-span-2 xl:col-span-3">
-        <div className="mb-2">
-          <Suspense fallback={<BreadcrumbHome />} key={`breadcrumb-${props.params.collection}`}>
-            <Breadcrumb type="collection" handle={props.params.collection} />
-          </Suspense>
-        </div>
-        <Suspense fallback={<HeaderPlaceholder />} key={`header-${props.params.collection}`}>
-          <Header collection={props.params.collection} />
-        </Suspense>
-
-        <Suspense
-          fallback={<ProductsGridPlaceholder />}
-          key={`products-${props.params.collection}`}
-        >
-          <CategoryPage {...props} />
-        </Suspense>
      </div>
-    </div>
+    </>
  );
 }
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@ -1,12 +1,15 @@
+import FAQ from 'components/faq';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';

 export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
-      <div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-4 lg:min-h-[800px]">
+      <div className="mx-auto mt-6 min-h-[500px] max-w-screen-2xl px-8 pb-10 lg:min-h-[800px]">
        <Suspense>{children}</Suspense>
      </div>
+      <FAQ handle="plp-faqs" />
+
      <Footer />
    </>
  );
--- a/components/faq.tsx
+++ b/components/faq.tsx
@ -1,16 +1,13 @@
 import { PhoneIcon } from '@heroicons/react/24/outline';
 import { getMetaobject } from 'lib/shopify';
-import kebabCase from 'lodash.kebabcase';
 import Image from 'next/image';
 import { Suspense } from 'react';
 import AccordionBlock from './page/accordion-block';
 import Tag from './tag';

-const { SITE_NAME } = process.env;
-
-const FAQ = async () => {
+const FAQ = async ({ handle }: { handle: string }) => {
  const faqs = await getMetaobject({
-    handle: { handle: `${kebabCase(SITE_NAME)}-faqs`, type: 'accordion' }
+    handle: { handle, type: 'accordion' }
  });

  if (!faqs) return null;
--- a/components/home-page/about.tsx
+++ b/components/home-page/about.tsx
@ -1,15 +1,13 @@
 import DisplayTabs from 'components/display-tabs';
 import RichTextDisplay from 'components/page/rich-text-display';
 import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify';
-import kebabCase from 'lodash.kebabcase';
 import Image from 'next/image';
 import Tag from '../tag';
 import ButtonLink from './button-link';

-const { SITE_NAME } = process.env;
 const About = async () => {
  const aboutUs = await getMetaobject({
-    handle: { type: 'about_us', handle: `${kebabCase(SITE_NAME)}-about` }
+    handle: { type: 'about_us', handle: 'about-us' }
  });

  if (!aboutUs) return null;
--- a/components/home-page/why-choose.tsx
+++ b/components/home-page/why-choose.tsx
@ -1,14 +1,13 @@
 import ImageDisplay from 'components/page/image-display';
 import RichTextDisplay from 'components/page/rich-text-display';
 import { getMetaobject, getMetaobjectsByIds } from 'lib/shopify';
-import kebabCase from 'lodash.kebabcase';
 import { Suspense } from 'react';
 import Tag from '../tag';

 const { SITE_NAME } = process.env;
 const WhyChoose = async () => {
  const whyChooseContent = await getMetaobject({
-    handle: { type: 'why_choose', handle: `${kebabCase(SITE_NAME)}-why-choose` }
+    handle: { type: 'why_choose', handle: 'why-choose' }
  });

  if (!whyChooseContent || !whyChooseContent.items) return null;