@tscircuit/fake-snippets 0.0.26 → 0.0.28

package/dist/index.d.ts

@@ -355,6 +355,7 @@ declare const packageSchema: z.ZodObject<{
     license: z.ZodNullable<z.ZodString>;
     star_count: z.ZodDefault<z.ZodNumber>;
     ai_description: z.ZodNullable<z.ZodString>;
+    ai_usage_instructions: z.ZodNullable<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -379,6 +380,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     ai_description: string | null;
+    ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
 }, {
     name: string;
@@ -394,6 +396,7 @@ declare const packageSchema: z.ZodObject<{
     latest_package_release_id: string | null;
     latest_version: string | null;
     ai_description: string | null;
+    ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     star_count?: number | undefined;
     is_private?: boolean | null | undefined;
@@ -605,6 +608,7 @@ declare const createDatabase: ({ seed }?: {
         latest_package_release_id: string | null;
         latest_version: string | null;
         ai_description: string | null;
+        ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     }[];
     orders: {
@@ -842,6 +846,7 @@ declare const createDatabase: ({ seed }?: {
         latest_package_release_id: string | null;
         latest_version: string | null;
         ai_description: string | null;
+        ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     }[];
     orders: {

package/dist/index.js

@@ -144,7 +144,8 @@ var packageSchema = z.object({
   latest_version: z.string().nullable(),
   license: z.string().nullable(),
   star_count: z.number().default(0),
-  ai_description: z.string().nullable()
+  ai_description: z.string().nullable(),
+  ai_usage_instructions: z.string().nullable()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),
@@ -2016,7 +2017,8 @@ var initializer = combine(databaseSchema.parse({}), (set, get) => ({
       star_count: 0,
       created_at: currentTime,
       updated_at: currentTime,
-      ai_description: null,
+      ai_description: "placeholder ai description",
+      ai_usage_instructions: "placeholder ai usage instructions",
       is_snippet: true,
       is_board: snippet.snippet_type === "board",
       is_package: snippet.snippet_type === "package",

package/fake-snippets-api/lib/db/autoload-snippets.json

@@ -16,6 +16,10 @@
       "owner": "seveibar",
       "name": "usb-c-flashlight"
     },
+    {
+      "owner": "seveibar",
+      "name": "nine-key-keyboard"
+    },
     {
       "owner": "AnasSarkiz",
       "name": "grid-of-LEDs-with-an-ESP32"

package/fake-snippets-api/lib/db/db-client.ts

@@ -216,7 +216,8 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       star_count: 0,
       created_at: currentTime,
       updated_at: currentTime,
-      ai_description: null,
+      ai_description: "placeholder ai description",
+      ai_usage_instructions: "placeholder ai usage instructions",
       is_snippet: true,
       is_board: snippet.snippet_type === "board",
       is_package: snippet.snippet_type === "package",

package/fake-snippets-api/lib/db/schema.ts

@@ -166,6 +166,7 @@ export const packageSchema = z.object({
   license: z.string().nullable(),
   star_count: z.number().default(0),
   ai_description: z.string().nullable(),
+  ai_usage_instructions: z.string().nullable(),
 })
 export type Package = z.infer<typeof packageSchema>
 

package/fake-snippets-api/lib/public-mapping/public-map-package.ts

@@ -16,6 +16,7 @@ export const publicMapPackage = (internalPackage: {
   updated_at: string
   created_at: string
   ai_description: string | null
+  ai_usage_instructions: string | null
   is_snippet: boolean
   is_board: boolean
   is_package: boolean

package/fake-snippets-api/routes/api/package_files/list.ts

@@ -37,9 +37,12 @@ export default withRouteSpec(routeSpec)(async (req, ctx) => {
     })
   }
 
-  const packageFiles = ctx.db.packageFiles.filter(
-    (file) => file.package_release_id === packageReleaseId,
-  )
+  const packageFiles = ctx.db.packageFiles
+    .filter((file) => file.package_release_id === packageReleaseId)
+    .map((file) => ({
+      ...file,
+      content_text: undefined,
+    }))
 
   return ctx.json({
     ok: true,

package/fake-snippets-api/routes/api/package_releases/get.ts

@@ -9,13 +9,79 @@ export default withRouteSpec({
   jsonBody: z.object({
     package_release_id: z.string().optional(),
     package_name_with_version: z.string().optional(),
+    package_name: z.string().optional(),
+    package_id: z.string().optional(),
+    is_latest: z.boolean().optional(),
   }),
   jsonResponse: z.object({
     ok: z.boolean(),
     package_release: zt.packageReleaseSchema,
   }),
 })(async (req, ctx) => {
-  const { package_release_id, package_name_with_version } = req.jsonBody
+  const {
+    package_release_id,
+    package_name_with_version,
+    package_name,
+    package_id,
+    is_latest,
+  } = req.jsonBody
+
+  // Handle package_name with is_latest
+  if (package_name && is_latest === true) {
+    const pkg = ctx.db.packages.find((x) => x.name === package_name)
+
+    if (!pkg) {
+      return ctx.error(404, {
+        error_code: "package_not_found",
+        message: "Package not found",
+      })
+    }
+
+    // Sort releases by version to find the latest one
+    const packageReleases = ctx.db.packageReleases
+      .filter((x) => x.package_id === pkg.package_id)
+      .sort((a, b) => {
+        return (
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        )
+      })
+
+    if (packageReleases.length === 0) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "No releases found for this package",
+      })
+    }
+
+    return ctx.json({
+      ok: true,
+      package_release: publicMapPackageRelease(packageReleases[0]),
+    })
+  }
+
+  // Handle package_id with is_latest
+  if (package_id && is_latest === true) {
+    // Sort releases by version to find the latest one
+    const packageReleases = ctx.db.packageReleases
+      .filter((x) => x.package_id === package_id)
+      .sort((a, b) => {
+        return (
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        )
+      })
+
+    if (packageReleases.length === 0) {
+      return ctx.error(404, {
+        error_code: "package_release_not_found",
+        message: "No releases found for this package",
+      })
+    }
+
+    return ctx.json({
+      ok: true,
+      package_release: publicMapPackageRelease(packageReleases[0]),
+    })
+  }
 
   if (package_name_with_version && !package_release_id) {
     const [packageName, parsedVersion] = package_name_with_version.split("@")

package/fake-snippets-api/routes/api/packages/create.ts

@@ -47,10 +47,11 @@ export default withRouteSpec({
     updated_at: new Date().toISOString(),
     unscoped_name: name,
     star_count: 0,
-    ai_description: name,
+    ai_description: "placeholder ai description",
     is_private: is_private ?? false,
     is_public: is_private === true ? false : true,
     is_unlisted: is_private === true ? true : (is_unlisted ?? false),
+    ai_usage_instructions: "placeholder ai usage instructions",
   })
 
   if (!newPackage) {

package/fake-snippets-api/routes/api/snippets/create.ts

@@ -92,6 +92,7 @@ export default withRouteSpec({
       is_public: is_public || true,
       is_unlisted: is_unlisted || false,
       latest_package_release_id: `package_release_${timestamp}`,
+      ai_usage_instructions: "placeholder ai usage instructions",
     }
 
     ctx.db.addPackage(newPackage)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "repository": {
     "type": "git",
@@ -159,6 +159,7 @@
     "react": "^18.3.1",
     "redaxios": "^0.5.1",
     "sharp": "^0.33.5",
+    "shiki": "^3.2.1",
     "tailwindcss": "^3.4.13",
     "terser": "^5.27.0",
     "tsup": "^8.3.5",

package/public/placeholder-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>

package/public/placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>

package/src/App.tsx

@@ -71,6 +71,7 @@ const ViewOrderPage = lazyImport(() => import("@/pages/view-order"))
 const ViewSnippetPage = lazyImport(() => import("@/pages/view-snippet"))
 const DevLoginPage = lazyImport(() => import("@/pages/dev-login"))
 const BetaPage = lazyImport(() => import("@/pages/beta"))
+const ViewPackagePage = lazyImport(() => import("@/pages/view-package"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -101,6 +102,11 @@ function App() {
           <Switch>
             <Route path="/" component={LandingPage} />
             <Route path="/beta" component={BetaPage} />
+            <Route path="/beta/:author/:packageName" component={BetaPage} />
+            <Route
+              path="/view-package/:author/:packageName"
+              component={ViewPackagePage}
+            />
             <Route path="/editor" component={EditorPage} />
             <Route path="/quickstart" component={QuickstartPage} />
             <Route path="/dashboard" component={DashboardPage} />

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useMemo } from "react"
+import { useQuery } from "react-query"
+import { createHighlighter, Highlighter } from "shiki"
+
+let globalHighlighter$: any
+let globalHighlighter: Highlighter
+
+const fileExtensionsToLanguages = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+}
+
+export const ShikiCodeViewer = ({
+  code,
+  filePath,
+}: { code: string; filePath: string }) => {
+  useEffect(() => {
+    async function setupHighlighter() {
+      if (globalHighlighter$) return
+      globalHighlighter$ = await createHighlighter({
+        langs: ["typescript"],
+        themes: ["vitesse-light"],
+      })
+      globalHighlighter = await globalHighlighter$
+    }
+    setupHighlighter()
+  }, [])
+
+  const html = useMemo(
+    () =>
+      globalHighlighter?.codeToHtml(code, {
+        lang:
+          fileExtensionsToLanguages[
+            filePath.split(".").pop() as keyof typeof fileExtensionsToLanguages
+          ] || "typescript",
+        theme: "vitesse-light",
+      }),
+    [filePath, code, globalHighlighter],
+  )
+
+  if (!html) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="text-sm shiki" dangerouslySetInnerHTML={{ __html: html }} />
+  )
+}

package/src/components/ViewPackagePage/components/file-explorer.tsx

@@ -0,0 +1,118 @@
+import { Clock, FileText, Folder, Tag } from "lucide-react"
+
+export default function FileExplorer() {
+  const files = [
+    {
+      type: "folder",
+      name: "lib",
+      message: "Utilities for parsing keyboard layouts",
+      time: "last week",
+    },
+    {
+      type: "folder",
+      name: "tests",
+      message: "Example keyboard configurations",
+      time: "2 days ago",
+    },
+    {
+      type: "file",
+      name: "LICENSE",
+      message: "MIT License",
+      time: "2 months ago",
+    },
+    {
+      type: "file",
+      name: "README.md",
+      message: "Overview of project",
+      time: "last month",
+    },
+    {
+      type: "file",
+      name: "biome.json",
+      message: "Formatting configuration",
+      time: "2 months ago",
+    },
+    {
+      type: "file",
+      name: "bun.lock",
+      message: "",
+      time: "2 days ago",
+    },
+    {
+      type: "file",
+      name: "package.json",
+      message: "Package dependencies",
+      time: "2 days ago",
+    },
+    {
+      type: "file",
+      name: "tsconfig.json",
+      message: "TypeScript configuration",
+      time: "2 months ago",
+    },
+  ]
+
+  return (
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
+      <div className="flex items-center px-4 py-2 md:py-3 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
+        {/* Desktop view */}
+        <div className="hidden md:flex items-center text-xs">
+          <Tag className="h-4 w-4 mr-1 text-gray-500 dark:text-[#8b949e]" />
+          <span className="text-gray-500 dark:text-[#8b949e]">v0.0.361</span>
+          <div className="ml-2 text-green-500 dark:text-[#3fb950]">✓</div>
+        </div>
+        <div className="hidden md:flex ml-auto items-center text-xs text-gray-500 dark:text-[#8b949e]">
+          <Clock className="h-4 w-4 mr-1" />
+          <span>2 days ago</span>
+          <div className="ml-4 flex items-center">
+            <Tag className="h-4 w-4 mr-1" />
+            <span>12 Releases</span>
+          </div>
+        </div>
+
+        {/* Mobile view */}
+        <div className="md:hidden flex items-center justify-between w-full">
+          <div className="flex items-center">
+            <span className="text-xs text-gray-500 dark:text-[#8b949e]">
+              v0.0.361
+            </span>
+            <div className="ml-1 text-green-500 dark:text-[#3fb950]">✓</div>
+          </div>
+          <div className="flex items-center space-x-3 text-xs text-gray-500 dark:text-[#8b949e]">
+            <div className="flex items-center">
+              <Clock className="h-3 w-3 mr-0.5" />
+              <span>2d</span>
+            </div>
+            <div className="flex items-center">
+              <Tag className="h-3 w-3 mr-0.5" />
+              <span>12</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Files */}
+      <div className="bg-white dark:bg-[#0d1117]">
+        {files.map((file, index) => (
+          <div
+            key={index}
+            className="flex items-center px-4 py-2 hover:bg-gray-50 dark:hover:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]"
+          >
+            {file.type === "folder" ? (
+              <Folder className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+            ) : (
+              <FileText className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+            )}
+            <span className="text-sm">{file.name}</span>
+            <span className="ml-auto text-xs text-gray-500 dark:text-[#8b949e]">
+              {file.message}
+            </span>
+            <span className="ml-4 text-xs text-gray-500 dark:text-[#8b949e]">
+              {file.time}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}