chore: update with suggested changes

Author: saurabhburade

src/components/FaqAccordian/FaqAccordian.stories.tsx renamed to src/components/FaqAccordion/FaqAccordion.stories.tsx

@@ -1,32 +1,37 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "."
+import {
+  FaqAccordion,
+  FaqAccordionContent,
+  FaqAccordionItem,
+  FaqAccordionTrigger,
+} from "."
 
 const meta = {
   title: "FaqAccordion",
-  component: Accordion,
+  component: FaqAccordion,
   decorators: [
     (Story) => (
       <div className="">
         <Story />
       </div>
     ),
   ],
-} satisfies Meta<typeof Accordion>
+} satisfies Meta<typeof FaqAccordion>
 
 export default meta
 
-export const FaqAccordion: StoryObj = {
+export const FaqAccordionStory: StoryObj = {
   render: () => (
-    <Accordion type="single" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>
+    <FaqAccordion type="single" collapsible>
+      <FaqAccordionItem value="item-1">
+        <FaqAccordionTrigger>
           <h2 className="text-start text-base md:text-xl">
             Why is there no &apos;official&apos; Ethereum L2?
           </h2>
-        </AccordionTrigger>
+        </FaqAccordionTrigger>
 
-        <AccordionContent>
+        <FaqAccordionContent>
           Just as there is no &apos;official&apos; Ethereum client, there is no
           &apos;official&apos; Ethereum layer 2. Ethereum is permissionless -
           technically anyone can create a layer 2! Multiple teams will implement
@@ -35,15 +40,15 @@ export const FaqAccordion: StoryObj = {
           use cases. Much like we have multiple Ethereum clients developed by
           multiple teams in order to have diversity in the network, this too
           will be how layer 2s develop in the future.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>
+        </FaqAccordionContent>
+      </FaqAccordionItem>
+      <FaqAccordionItem value="item-2">
+        <FaqAccordionTrigger>
           <h2 className="text-start text-base md:text-xl">
             Why is there no &apos;official&apos; Ethereum L2?
           </h2>
-        </AccordionTrigger>
-        <AccordionContent>
+        </FaqAccordionTrigger>
+        <FaqAccordionContent>
           Just as there is no &apos;official&apos; Ethereum client, there is no
           &apos;official&apos; Ethereum layer 2. Ethereum is permissionless -
           technically anyone can create a layer 2! Multiple teams will implement
@@ -52,8 +57,8 @@ export const FaqAccordion: StoryObj = {
           use cases. Much like we have multiple Ethereum clients developed by
           multiple teams in order to have diversity in the network, this too
           will be how layer 2s develop in the future.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
+        </FaqAccordionContent>
+      </FaqAccordionItem>
+    </FaqAccordion>
   ),
 }

src/components/FaqAccordian/index.tsx renamed to src/components/FaqAccordion/index.tsx

@@ -6,16 +6,15 @@ import { cn } from "@/lib/utils/cn"
 
 import * as RootAccordion from "../../../tailwind/ui/accordion"
 
-const AccordionTrigger = React.forwardRef<
+const FaqAccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  // p-4 hover:bg-background-highlight
-  <AccordionPrimitive.Header className="flex w-full">
+  <AccordionPrimitive.Header>
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "px-4 py-3 md:px-8 md:py-6",
+        "w-full px-4 py-3 md:px-8 md:py-6",
         "flex flex-1 items-center justify-between gap-2",
         "border-t border-body-light",
         "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover",
@@ -38,17 +37,20 @@ const AccordionTrigger = React.forwardRef<
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+FaqAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
-// TODO: Prop types
-const Accordion = ({ children, ...props }) => {
+const FaqAccordion = ({
+  children,
+  type,
+  ...props
+}: AccordionPrimitive.AccordionSingleProps) => {
   return (
     <RootAccordion.Accordion
-      type="single"
+      type={type}
       collapsible
       className={cn(
         "rounded border border-body-light first:border-t-0",
-        "overflow-hidden bg-background",
+        "max-w-4xl overflow-hidden bg-background",
         props?.className
       )}
       {...props}
@@ -57,7 +59,7 @@ const Accordion = ({ children, ...props }) => {
     </RootAccordion.Accordion>
   )
 }
-const AccordionItem = React.forwardRef<
+const FaqAccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
@@ -67,16 +69,16 @@ const AccordionItem = React.forwardRef<
     {...props}
   />
 ))
-AccordionItem.displayName = "AccordionItem"
+FaqAccordionItem.displayName = "AccordionItem"
 
-const AccordionContent = React.forwardRef<
+const FaqAccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden px-4 text-sm md:px-8",
+      "w-full overflow-hidden px-4 text-sm md:px-8",
       "transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     )}
     {...props}
@@ -87,6 +89,11 @@ const AccordionContent = React.forwardRef<
   </AccordionPrimitive.Content>
 ))
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+FaqAccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
+export {
+  FaqAccordion,
+  FaqAccordionContent,
+  FaqAccordionItem,
+  FaqAccordionTrigger,
+}