Added a new accordion component

Author: Pratiyankkumar

app/(docs)/docs/accordion/accordion-demo.tsx

@@ -0,0 +1,32 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+export function AccordionDemo() {
+  return (
+    <Accordion type="single" collapsible className="w-4/5">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other
+          components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. Its animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

app/(docs)/docs/accordion/page.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import {
+  PageSubTitle,
+  PageTemplate,
+} from "@/app/(docs)/docs/components/page-template";
+import { Steppers } from "@/components/ui/steppers";
+import PreviewCodeCard from "@/app/(docs)/docs/components/preview-code-card";
+import { Metadata } from "next";
+import { baseMetadata } from "@/app/(docs)/layout-parts/base-metadata";
+import { AccordionDemo } from "./accordion-demo";
+
+const tailwindConfigCode = ` extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },`;
+
+export const metadata: Metadata = baseMetadata({
+  title: "Accordion",
+  description:
+    "A vertically stacked set of interactive headings that each reveal a section of content.",
+});
+
+const SkeletonLoadingPage = () => {
+  return (
+    <PageTemplate
+      title="Accordion"
+      description="A vertically stacked set of interactive headings that each reveal a section of content."
+    >
+      <PreviewCodeCard path="app/(docs)/docs/accordion/accordion-demo.tsx">
+        {<AccordionDemo />}
+      </PreviewCodeCard>
+
+      <PageSubTitle>Installation</PageSubTitle>
+      <Steppers
+        withInstall
+        tailwindConfig={{
+          tailwindConfig: true,
+          code: tailwindConfigCode,
+        }}
+        codePath="components/ui/accordion.tsx"
+        withEnd
+      />
+    </PageTemplate>
+  );
+};
+
+export default SkeletonLoadingPage;

app/(docs)/layout-parts/documentation.constant.ts

@@ -138,6 +138,12 @@ export const DOCS: Documentation[] = [
         url: "/docs/skeleton",
         new: true,
       },
+      {
+        label: "Accordion",
+        value: "accordion",
+        url: "/docs/accordion",
+        new: true,
+      },
     ],
   },
 ];

components/ui/steppers.tsx

@@ -3,20 +3,30 @@ import { H4 } from "@/components/ui/heading-with-anchor";
 import { cn } from "@/lib/utils";
 import CodeHighlight from "@/app/(docs)/docs/components/code-card/parts/code-highlight";
 import fs from "fs/promises";
+import { InlineCode } from "./inline-code";
 
 interface StepperProps {
   children?: React.ReactNode;
   title?: string;
   step?: number;
 }
+
 const Stepper = ({ title, children, step }: StepperProps) => {
   return (
     <div>
       <div className="flex items-center gap-3">
-        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-800 text-white p-3 ">
+        <span className="flex h-10 w-10 items-center justify-center rounded-full bg-zinc-800 text-white p-3">
           {step}
         </span>
-        <H4>{title}</H4>
+        <H4>
+          {title === "Extend tailwind.config.js" ? (
+            <span>
+              Extend <InlineCode>tailwind.config.js</InlineCode>
+            </span>
+          ) : (
+            title
+          )}
+        </H4>
       </div>
       <div className="my-3 ml-5 border-l-2 border-l-gray-200 pl-8">
         {children}
@@ -31,28 +41,38 @@ interface SteppersBaseProps {
   withEnd?: boolean;
 }
 
+interface TailwindConfigStep {
+  tailwindConfig?: boolean;
+  code?: string;
+}
+
 interface SteppersWithInstallProps extends SteppersBaseProps {
   withInstall?: true;
-  /** 要複製的程式碼 */
   codePath?: string;
-  /** npm install script */
   installScript?: string;
+  tailwindConfig?: TailwindConfigStep;
 }
 
 interface SteppersWithoutInstallProps extends SteppersBaseProps {
   withInstall?: false;
+  tailwindConfig?: TailwindConfigStep;
 }
 
 type SteppersProps = SteppersWithInstallProps | SteppersWithoutInstallProps;
 
 export const Steppers = async (props: SteppersProps) => {
-  const { steps, className, withEnd, withInstall } = props;
+  const { steps, className, withEnd, withInstall, tailwindConfig } = props;
 
   let installCode = "";
   if (withInstall && props.codePath) {
     installCode = await fs.readFile(props.codePath, "utf8");
   }
-  const withInstallOffset = withInstall ? (props.installScript ? 2 : 1) : 0;
+
+  // Calculate the offset based on install steps and tailwind config
+  const installStepsCount = withInstall ? (props.installScript ? 2 : 1) : 0;
+  const tailwindStepCount = tailwindConfig?.tailwindConfig ? 1 : 0;
+  const totalOffset = installStepsCount + tailwindStepCount;
+
   return (
     <>
       <div className={cn(className)}>
@@ -61,30 +81,44 @@ export const Steppers = async (props: SteppersProps) => {
             {props.installScript && (
               <Stepper
                 title="Install the package if you do not have it."
-                step={withInstallOffset - 1}
+                step={1}
               >
                 <CodeHighlight lang="shell" code={props.installScript} />
               </Stepper>
             )}
             <Stepper
               title="Copy and paste the following code into your project."
-              step={withInstallOffset}
+              step={props.installScript ? 2 : 1}
             >
               <CodeHighlight code={installCode} withExpand={false} />
             </Stepper>
           </>
         )}
+
+        {tailwindConfig?.tailwindConfig && (
+          <Stepper
+            title="Extend tailwind.config.js"
+            step={installStepsCount + 1}
+          >
+            <CodeHighlight
+              code={tailwindConfig.code || ""}
+              withExpand={false}
+            />
+          </Stepper>
+        )}
+
         {steps?.map((props, index) => (
           <Stepper
             key={props.title}
             {...props}
-            step={index + 1 + withInstallOffset}
+            step={index + 1 + totalOffset}
           />
         ))}
+
         {withEnd && (
           <Stepper
             title="Update the import paths to match your project setup."
-            step={(steps?.length || 0) + 1 + withInstallOffset}
+            step={(steps?.length || 0) + 1 + totalOffset}
           />
         )}
       </div>

lib/routes-config.ts

@@ -65,6 +65,7 @@ export const ROUTES = [
       },
       { label: "Spinner", value: "spinner", url: `${BASE_PATH}/spinner` },
       { label: "Skeleton", value: "skeleton", url: `${BASE_PATH}/skeleton` },
+      { label: "Accordion", value: "accordion", url: `${BASE_PATH}/accordion` },
     ],
   },
 ];