Merge pull request #28 from filecoin-project/bp/accordion-component

[UXIT-3442] Accordion component

Author: CharlyMartin

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package-lock.json

@@ -12,9 +12,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-form": "^0.1.8",
     "@tailwindcss/vite": "^4.1.14",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "filecoin-pin": "^0.7.3",
     "lucide-react": "^0.545.0",
     "pino": "^10.0.0",
@@ -34,6 +36,7 @@
     "buffer": "^6.0.3",
     "globals": "^16.4.0",
     "process": "^0.11.10",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
     "vite": "^7.1.9"
   }

package.json

@@ -4,6 +4,7 @@ import DragNDrop from '../upload/drag-n-drop.tsx'
 import UploadProgress from '../upload/upload-progress.tsx'
 import './content.css'
 import { PageTitle } from '../ui/page-title.tsx'
+import { Heading } from '../ui/heading.tsx'
 
 export default function Content() {
   const [uploadedFile, setUploadedFile] = useState<{ file: File; cid: string } | null>(null)
@@ -39,7 +40,8 @@ export default function Content() {
       <PageTitle />
 
       {uploadedFile ? (
-        <div className="upload-progress-section">
+        <div className="space-y-6">
+          <Heading tag="h2">Uploaded files</Heading>
           <UploadProgress
             fileName={uploadedFile.file.name}
             fileSize={formatFileSize(uploadedFile.file.size)}
@@ -78,7 +80,7 @@ export default function Content() {
         </div>
       ) : (
         <div className="space-y-6">
-          <h2 className="text-xl font-medium text-white">Upload a file</h2>
+          <Heading tag="h2">Upload a file</Heading>
           <DragNDrop isUploading={uploadState.isUploading} onUpload={handleUpload} />
         </div>
       )}

src/components/layout/content.tsx

@@ -0,0 +1,50 @@
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from 'lucide-react'
+
+import { cn } from '../../utils/cn.ts'
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      className={cn('border-b last:border-b-0', className)}
+      data-slot="accordion-item"
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className
+        )}
+        data-slot="accordion-trigger"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-5 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      data-slot="accordion-content"
+      {...props}
+    >
+      <div className={className}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/accordion.tsx

@@ -13,8 +13,8 @@ const badgeVariants = cva('inline-flex items-center gap-1 pl-1.5 pr-2 py-0.5 rou
   variants: {
     status: {
       'in-progress': 'bg-badge-in-progress text-badge-in-progress-text border border-badge-in-progress-border',
-      completed: 'bg-badge-success text-brand-50 border border-badge-success-border',
-      pinned: 'bg-badge-success text-brand-50 border border-badge-success-border',
+      completed: 'bg-brand-950 text-brand-700 border border-brand-900',
+      pinned: 'bg-brand-950 text-brand-700 border border-brand-900',
       error: null,
       pending: 'bg-zinc-800 border border-zinc-700 text-zinc-300',
     },

src/components/ui/badge-status.tsx

@@ -8,7 +8,7 @@ type CardWrapperProps = {
 type CardHeaderProps = {
   title: string
   status: UploadProgress['status']
-  estimatedTime?: string
+  estimatedTime?: number
 }
 
 type CardContentProps = {
@@ -19,10 +19,11 @@ function CardWrapper({ children }: CardWrapperProps) {
   return <div className="bg-zinc-900 p-6 rounded-lg space-y-6">{children}</div>
 }
 
-function CardHeader({ title, status }: CardHeaderProps) {
+function CardHeader({ title, status, estimatedTime }: CardHeaderProps) {
   return (
     <div className="flex items-center justify-between">
       <h3 className="font-medium">{title}</h3>
+      {status === 'in-progress' && estimatedTime && <span className="text-sm text-zinc-400">{estimatedTime}%</span>}
       {status !== 'in-progress' && <BadgeStatus status={status} />}
     </div>
   )