@tscircuit/fake-snippets 0.0.26 → 0.0.28

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -0,0 +1,44 @@
+import { Tag, Clock } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface SidebarReleasesSectionProps {
+  isLoading?: boolean
+}
+
+export default function SidebarReleasesSection({
+  isLoading = false,
+}: SidebarReleasesSectionProps) {
+  if (isLoading) {
+    return (
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold mb-2">Releases</h2>
+        <div className="mb-2">
+          <Skeleton className="h-4 w-20" />
+        </div>
+        <div className="mb-3">
+          <Skeleton className="h-4 w-24" />
+        </div>
+        <Skeleton className="h-4 w-32" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-semibold mb-2">Releases</h2>
+      <div className="flex items-center mb-2">
+        <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+        <span className="text-sm font-medium">v0.0.361</span>
+      </div>
+      <div className="flex items-center mb-3">
+        <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+        <span className="text-sm text-gray-500 dark:text-[#8b949e]">
+          2 days ago
+        </span>
+      </div>
+      {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">
+        Push a new release
+      </a> */}
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/sidebar.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { useState } from "react"
+import SidebarAboutSection from "./sidebar-about-section"
+import SidebarReleasesSection from "./sidebar-releases-section"
+import PreviewImageSquares from "./preview-image-squares"
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  creator_account_id?: string
+  owner_org_id?: string
+}
+
+interface SidebarProps {
+  packageInfo?: PackageInfo
+  isLoading?: boolean
+  onViewChange?: (view: "3d" | "pcb" | "schematic") => void
+}
+
+export default function Sidebar({
+  packageInfo,
+  isLoading = false,
+  onViewChange,
+}: SidebarProps) {
+  return (
+    <div className="h-full p-4 bg-white dark:bg-[#0d1117] overflow-y-auto">
+      <SidebarAboutSection packageInfo={packageInfo} isLoading={isLoading} />
+      <PreviewImageSquares
+        packageInfo={packageInfo}
+        onViewChange={onViewChange}
+      />
+      <SidebarReleasesSection isLoading={isLoading} />
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -0,0 +1,9 @@
+export default function ThreeDView() {
+  return (
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
+      <h2 className="text-xl font-semibold text-gray-500 dark:text-[#8b949e]">
+        3D View Tab
+      </h2>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/tab-views/bom-view.tsx

@@ -0,0 +1,9 @@
+export default function BOMView() {
+  return (
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
+      <h2 className="text-xl font-semibold text-gray-500 dark:text-[#8b949e]">
+        BOM View Tab
+      </h2>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import { FileText, Folder } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface Directory {
+  type: "directory"
+  path: string
+  name: string
+}
+
+interface File {
+  type: "file"
+  path: string
+  name: string
+  content: string
+  created_at: string
+}
+
+interface FilesViewProps {
+  directories?: Directory[]
+  files?: File[]
+  isLoading?: boolean
+  onFileClicked?: (file: File) => void
+  onDirectoryClicked?: (directory: Directory) => void
+}
+
+export default function FilesView({
+  directories = [],
+  files = [],
+  isLoading = false,
+  onFileClicked,
+  onDirectoryClicked,
+}: FilesViewProps) {
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    const now = new Date()
+    const diffTime = Math.abs(now.getTime() - date.getTime())
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+    if (diffDays < 1) return "today"
+    if (diffDays === 1) return "yesterday"
+    if (diffDays < 7) return `${diffDays} days ago`
+    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`
+    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`
+    return `${Math.floor(diffDays / 365)} years ago`
+  }
+
+  // Combine directories and files for display
+  const items = [
+    ...directories.map((dir) => ({
+      ...dir,
+      message: "", // TODO insert ai description of directory here!
+      time: "",
+    })),
+    ...files.map((file) => ({
+      ...file,
+      message: "", // TODO insert ai description of file here!
+      time: formatDate(file.created_at),
+    })),
+  ].sort((a, b) => {
+    // Sort directories first, then files
+    if (a.type === "directory" && b.type === "file") return -1
+    if (a.type === "file" && b.type === "directory") return 1
+    // Then sort alphabetically by name
+    return a.name.localeCompare(b.name)
+  })
+
+  const handleItemClick = (item: any) => {
+    if (item.type === "directory" && onDirectoryClicked) {
+      onDirectoryClicked(item)
+    } else if (item.type === "file" && onFileClicked) {
+      onFileClicked(item)
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className="mb-4 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]">
+          <Skeleton className="h-4 w-24" />
+          <div className="ml-auto flex items-center space-x-4">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+        </div>
+        <div className="bg-white dark:bg-[#0d1117]">
+          {[...Array(5)].map((_, index) => (
+            <div
+              key={index}
+              className="flex items-center px-4 py-2 border-b border-gray-200 dark:border-[#30363d]"
+            >
+              <Skeleton className="h-4 w-4 mr-2" />
+              <Skeleton className="h-4 w-32" />
+              <div className="ml-auto flex items-center space-x-4">
+                <Skeleton className="h-4 w-40" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mb-4 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">
+          <span className="text-gray-500 dark:text-[#8b949e]">Files</span>
+        </div>
+        <div className="hidden md:flex ml-auto items-center text-xs text-gray-500 dark:text-[#8b949e]">
+          <span>
+            {files.length} files, {directories.length} directories
+          </span>
+        </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]">
+              Files
+            </span>
+          </div>
+          <div className="flex items-center text-xs text-gray-500 dark:text-[#8b949e]">
+            <span>{files.length + directories.length} items</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Files and Directories */}
+      <div className="bg-white dark:bg-[#0d1117]">
+        {items.length === 0 ? (
+          <div className="px-4 py-8 text-center text-gray-500 dark:text-[#8b949e]">
+            No files found
+          </div>
+        ) : (
+          items.map((item, 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] cursor-pointer group"
+              onClick={() => handleItemClick(item)}
+            >
+              {item.type === "directory" ? (
+                <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 group-hover:underline">{item.name}</span>
+              <span className="ml-auto text-xs text-gray-500 dark:text-[#8b949e]">
+                {item.message}
+              </span>
+              {item.time && (
+                <span className="ml-4 text-xs text-gray-500 dark:text-[#8b949e]">
+                  {item.time}
+                </span>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/tab-views/pcb-view.tsx

@@ -0,0 +1,9 @@
+export default function PCBView() {
+  return (
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
+      <h2 className="text-xl font-semibold text-gray-500 dark:text-[#8b949e]">
+        PCB View Tab
+      </h2>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/tab-views/schematic-view.tsx

@@ -0,0 +1,9 @@
+export default function SchematicView() {
+  return (
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-8 mb-4 bg-white dark:bg-[#0d1117] flex items-center justify-center">
+      <h2 className="text-xl font-semibold text-gray-500 dark:text-[#8b949e]">
+        Schematic View Tab
+      </h2>
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/theme-toggle.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useEffect, useState } from "react"
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  // Ensure component is mounted before accessing theme
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="outline"
+        size="icon"
+        className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
+      >
+        <Sun className="h-4 w-4" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="border-gray-300 dark:border-[#30363d] bg-gray-100 hover:bg-gray-200 dark:bg-[#21262d] dark:hover:bg-[#30363d] text-gray-700 dark:text-[#c9d1d9]"
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/components/ViewPackagePage/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/components/ViewPackagePage/hooks/use-toast.ts

@@ -0,0 +1,191 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }

package/src/components/ViewPackagePage/simulate-page.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import RepoPageContent from "./components/repo-page-content"
+
+// Sample data for simulation
+const samplePackageFiles = [
+  {
+    package_file_id: "1",
+    package_release_id: "1",
+    file_path: "README.md",
+    content_text:
+      "# @tscircuit/keyboard-default60\n\nA Default 60 keyboard created with tscircuit\n\n## Features\n\n- Full mechanical keyboard PCB design\n- Compatible with standard 60% cases\n- USB-C connector\n- Supports QMK firmware",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "2",
+    package_release_id: "1",
+    file_path: "LICENSE",
+    content_text:
+      'MIT License\n\nCopyright (c) 2023 tscircuit\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions...',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "3",
+    package_release_id: "1",
+    file_path: "lib/index.tsx",
+    content_text:
+      "import React from 'react'\nimport { PCB, Resistor, Capacitor, LED } from '@tscircuit/react'\n\nexport const KeyboardDefault60 = () => {\n  return (\n    <PCB name=\"keyboard-default60\">\n      {/* Main controller */}\n      <Microcontroller x={50} y={50} name=\"MCU1\" />\n      \n      {/* Key matrix */}\n      <KeyMatrix x={100} y={100} rows={5} cols={14} />\n      \n      {/* Power circuit */}\n      <PowerCircuit x={20} y={20} />\n    </PCB>\n  )\n}",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "4",
+    package_release_id: "1",
+    file_path: "lib/components/KeyMatrix.tsx",
+    content_text:
+      "import React from 'react'\nimport { Switch, Diode } from '@tscircuit/react'\n\ninterface KeyMatrixProps {\n  x: number\n  y: number\n  rows: number\n  cols: number\n}\n\nexport const KeyMatrix = ({ x, y, rows, cols }: KeyMatrixProps) => {\n  const keys = []\n  \n  for (let row = 0; row < rows; row++) {\n    for (let col = 0; col < cols; col++) {\n      keys.push(\n        <Switch\n          key={`key-${row}-${col}`}\n          x={x + col * 19.05}\n          y={y + row * 19.05}\n          name={`SW${row * cols + col + 1}`}\n        />\n      )\n      \n      keys.push(\n        <Diode\n          key={`diode-${row}-${col}`}\n          x={x + col * 19.05 + 5}\n          y={y + row * 19.05 + 5}\n          name={`D${row * cols + col + 1}`}\n        />\n      )\n    }\n  }\n  \n  return <>{keys}</>\n}",
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "5",
+    package_release_id: "1",
+    file_path: "lib/components/PowerCircuit.tsx",
+    content_text:
+      'import React from \'react\'\nimport { Capacitor, Resistor, Regulator } from \'@tscircuit/react\'\n\ninterface PowerCircuitProps {\n  x: number\n  y: number\n}\n\nexport const PowerCircuit = ({ x, y }: PowerCircuitProps) => {\n  return (\n    <>\n      <Regulator\n        x={x}\n        y={y}\n        name="U1"\n        value="AP2112K-3.3"\n      />\n      <Capacitor\n        x={x - 10}\n        y={y}\n        name="C1"\n        value="10uF"\n      />\n      <Capacitor\n        x={x + 10}\n        y={y}\n        name="C2"\n        value="10uF"\n      />\n      <Resistor\n        x={x}\n        y={y + 10}\n        name="R1"\n        value="10k"\n      />\n    </>\n  )\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "6",
+    package_release_id: "1",
+    file_path: "package.json",
+    content_text:
+      '{\n  "name": "@tscircuit/keyboard-default60",\n  "version": "0.0.361",\n  "description": "A Default 60 keyboard created with tscircuit",\n  "main": "dist/index.js",\n  "types": "dist/index.d.ts",\n  "scripts": {\n    "build": "tsc",\n    "test": "jest"\n  },\n  "dependencies": {\n    "@tscircuit/react": "^0.1.0",\n    "react": "^18.2.0"\n  },\n  "devDependencies": {\n    "typescript": "^5.0.0",\n    "jest": "^29.0.0"\n  },\n  "license": "MIT"\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+  {
+    package_file_id: "7",
+    package_release_id: "1",
+    file_path: "tsconfig.json",
+    content_text:
+      '{\n  "compilerOptions": {\n    "target": "es2020",\n    "module": "esnext",\n    "moduleResolution": "node",\n    "declaration": true,\n    "outDir": "./dist",\n    "strict": true,\n    "esModuleInterop": true,\n    "skipLibCheck": true,\n    "forceConsistentCasingInFileNames": true,\n    "jsx": "react"\n  },\n  "include": ["lib/**/*"],\n  "exclude": ["node_modules", "**/*.test.ts"]\n}',
+    created_at: "2023-04-15T12:00:00Z",
+  },
+]
+
+const samplePackageInfo = {
+  name: "@tscircuit/keyboard-default60",
+  unscoped_name: "keyboard-default60",
+  owner_github_username: "tscircuit",
+  star_count: "16",
+  description: "A Default 60 keyboard created with tscircuit",
+  ai_description:
+    "This package contains the PCB design for a standard 60% mechanical keyboard layout, created using the tscircuit library. It includes the schematic, PCB layout, and 3D model.",
+}
+
+export default function SimulatePage() {
+  const [packageFiles, setPackageFiles] = useState<any>(null)
+  const [packageInfo, setPackageInfo] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // Simulate loading data after 1 second
+    const timer = setTimeout(() => {
+      setPackageFiles(samplePackageFiles)
+      setPackageInfo(samplePackageInfo)
+      setLoading(false)
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  // Event handlers with window.alert for testing
+  const handleFileClicked = (file: any) => {
+    window.alert(`File clicked: ${file.name}`)
+  }
+
+  const handleDirectoryClicked = (directory: any) => {
+    window.alert(`Directory clicked: ${directory.name}`)
+  }
+
+  const handleExportClicked = (exportType: string) => {
+    window.alert(`Export clicked: ${exportType}`)
+  }
+
+  const handleEditClicked = () => {
+    window.alert("Edit button clicked")
+  }
+
+  return (
+    <RepoPageContent
+      packageFiles={packageFiles}
+      packageInfo={packageInfo}
+      importantFilePaths={["README.md", "LICENSE", "package.json"]}
+      onFileClicked={handleFileClicked}
+      onDirectoryClicked={handleDirectoryClicked}
+      onExportClicked={handleExportClicked}
+      onEditClicked={handleEditClicked}
+    />
+  )
+}