ui Architecture Docs
Home / File/ file-upload-list.tsx — ui Source File

file-upload-list.tsx — ui Source File

Architecture documentation for file-upload-list.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.

File tsx DocumentationAtlas ContentSourcing 4 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  b837ea77_9d5c_d359_ecdf_5de71aa09909["file-upload-list.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  b837ea77_9d5c_d359_ecdf_5de71aa09909 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  c68c8707_2b57_a84c_88d0_54d7bfae76d0["item"]
  b837ea77_9d5c_d359_ecdf_5de71aa09909 --> c68c8707_2b57_a84c_88d0_54d7bfae76d0
  629a2cc2_a270_db60_d847_b9ccef0e892b["progress"]
  b837ea77_9d5c_d359_ecdf_5de71aa09909 --> 629a2cc2_a270_db60_d847_b9ccef0e892b
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  b837ea77_9d5c_d359_ecdf_5de71aa09909 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  style b837ea77_9d5c_d359_ecdf_5de71aa09909 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/examples/radix/ui/item"
import { Progress } from "@/examples/radix/ui/progress"
import { FileIcon } from "lucide-react"

export function FileUploadList() {
  const files = React.useMemo(
    () => [
      {
        id: "1",
        name: "document.pdf",
        progress: 45,
        timeRemaining: "2m 30s",
      },
      {
        id: "2",
        name: "presentation.pptx",
        progress: 78,
        timeRemaining: "45s",
      },
      {
        id: "3",
        name: "spreadsheet.xlsx",
        progress: 12,
        timeRemaining: "5m 12s",
      },
      {
        id: "4",
        name: "image.jpg",
        progress: 100,
        timeRemaining: "Complete",
      },
    ],
    []
  )

  return (
    <ItemGroup>
      {files.map((file) => (
        <Item key={file.id} size="xs" className="px-0">
          <ItemMedia variant="icon">
            <FileIcon className="size-5" />
          </ItemMedia>
          <ItemContent className="inline-block truncate">
            <ItemTitle className="inline">{file.name}</ItemTitle>
          </ItemContent>
          <ItemContent>
            <Progress value={file.progress} className="w-32" />
          </ItemContent>
          <ItemActions className="w-16 justify-end">
            <span className="text-muted-foreground text-sm">
              {file.timeRemaining}
            </span>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}

Domain

Subdomains

Functions

Dependencies

  • item
  • lucide-react
  • progress
  • react

Source

Frequently Asked Questions

What does file-upload-list.tsx do?
file-upload-list.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in file-upload-list.tsx?
file-upload-list.tsx defines 1 function(s): FileUploadList.
What does file-upload-list.tsx depend on?
file-upload-list.tsx imports 4 module(s): item, lucide-react, progress, react.
Where is file-upload-list.tsx in the architecture?
file-upload-list.tsx is located at apps/v4/examples/radix/file-upload-list.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free