@tscircuit/fake-snippets 0.0.28 → 0.0.30

package/src/hooks/use-package-stars.ts

@@ -0,0 +1,86 @@
+import { useMutation, useQuery, useQueryClient } from "react-query"
+import { useAxios } from "./use-axios"
+
+type PackageStarQuery = { package_id: string } | { name: string }
+
+interface PackageStarResponse {
+  is_starred: boolean
+  star_count: number
+}
+
+export const usePackageStars = (query: PackageStarQuery | null) => {
+  const axios = useAxios()
+
+  return useQuery<PackageStarResponse, Error & { status: number }>(
+    ["packageStars", query],
+    async () => {
+      if (!query) {
+        throw new Error("Query is required")
+      }
+
+      const { data } = await axios.get("/packages/get", {
+        params: query,
+      })
+
+      return {
+        is_starred: data.package.is_starred ?? false,
+        star_count: data.package.star_count ?? 0,
+      }
+    },
+    {
+      retry: false,
+      enabled: Boolean(query),
+    },
+  )
+}
+
+export const usePackageStarMutation = (query: PackageStarQuery) => {
+  const axios = useAxios()
+  const queryClient = useQueryClient()
+
+  const addStar = useMutation(
+    async () => {
+      const { data } = await axios.post("/packages/add_star", query)
+      return data
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["packageStars", query])
+      },
+    },
+  )
+
+  const removeStar = useMutation(
+    async () => {
+      const { data } = await axios.post("/packages/remove_star", query)
+      return data
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["packageStars", query])
+      },
+    },
+  )
+
+  return {
+    addStar,
+    removeStar,
+  }
+}
+
+// Convenience hooks for common use cases
+export const usePackageStarsById = (packageId: string | null) => {
+  return usePackageStars(packageId ? { package_id: packageId } : null)
+}
+
+export const usePackageStarsByName = (packageName: string | null) => {
+  return usePackageStars(packageName ? { name: packageName } : null)
+}
+
+export const usePackageStarMutationById = (packageId: string) => {
+  return usePackageStarMutation({ package_id: packageId })
+}
+
+export const usePackageStarMutationByName = (packageName: string) => {
+  return usePackageStarMutation({ name: packageName })
+}

package/src/lib/utils/timeAgo.ts

@@ -0,0 +1,9 @@
+import TimeAgo from "javascript-time-ago"
+import en from "javascript-time-ago/locale/en"
+
+TimeAgo.addDefaultLocale(en)
+
+export const timeAgo = (date: Date) => {
+  const timeAgo = new TimeAgo("en-US")
+  return timeAgo.format(date)
+}

package/src/pages/user-profile.tsx

@@ -12,6 +12,7 @@ import { Input } from "@/components/ui/input"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { GlobeIcon, MoreVertical, PencilIcon, Trash2 } from "lucide-react"
 import { useConfirmDeleteSnippetDialog } from "@/components/dialogs/confirm-delete-snippet-dialog"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,10 +23,7 @@ import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { OptimizedImage } from "@/components/OptimizedImage"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { SnippetTypeIcon } from "@/components/SnippetTypeIcon"
-import TimeAgo from "javascript-time-ago"
-import en from "javascript-time-ago/locale/en"
-
-TimeAgo.addDefaultLocale(en)
+import { timeAgo } from "@/lib/utils/timeAgo"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -60,7 +58,6 @@ export const UserProfilePage = () => {
     )
 
   const baseUrl = useSnippetsBaseApiUrl()
-  const timeAgo = new TimeAgo("en-US")
 
   const snippetsToShow =
     activeTab === "starred" ? starredSnippets : userSnippets
@@ -84,9 +81,20 @@ export const UserProfilePage = () => {
     <div>
       <Header />
       <div className="container mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">
-          {isCurrentUserProfile ? "My Profile" : `${username}'s Profile`}
-        </h1>
+        <div className="flex items-center gap-4 mb-6">
+          <Avatar className="h-16 w-16">
+            <AvatarImage src={`https://github.com/${username}.png`} />
+            <AvatarFallback>{username?.[0]?.toUpperCase()}</AvatarFallback>
+          </Avatar>
+          <div>
+            <h1 className="text-3xl font-bold">
+              {isCurrentUserProfile ? "My Profile" : `${username}'s Profile`}
+            </h1>
+            <div className="text-gray-600 mt-1">
+              {userSnippets?.length || 0} packages
+            </div>
+          </div>
+        </div>
         <div className="mb-6">
           <a
             href={`https://github.com/${username}`}
@@ -208,9 +216,7 @@ export const UserProfilePage = () => {
                           )}
                           <div className="flex items-center text-xs gap-1 text-gray-500">
                             <PencilIcon height={12} width={12} />
-                            <span>
-                              {timeAgo.format(new Date(snippet.updated_at))}
-                            </span>
+                            <span>{timeAgo(new Date(snippet.updated_at))}</span>
                           </div>
                         </div>
                       </div>

package/src/pages/view-package.tsx

@@ -1,23 +1,18 @@
 import RepoPageContent from "@/components/ViewPackagePage/components/repo-page-content"
-import SimulatePage from "@/components/ViewPackagePage/simulate-page"
+import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageByName } from "@/hooks/use-package-by-package-name"
 import { usePackageFiles } from "@/hooks/use-package-files"
 import { usePackageRelease } from "@/hooks/use-package-release"
-import { useLocation } from "wouter"
+import { useLocation, useParams } from "wouter"
 
 export const ViewPackagePage = () => {
-  // Get the current path and extract author/packageName
-  const [location] = useLocation()
-  const pathParts = location.split("/")
-  const author = pathParts[2]
-  const urlPackageName = pathParts[3]
-  const fullPackageName = `${author}/${urlPackageName}`
-
-  const { data: packageInfo } = usePackageByName(fullPackageName)
+  const { packageInfo } = useCurrentPackageInfo()
+  const { author, packageName } = useParams()
+  const [, setLocation] = useLocation()
 
   const { data: packageRelease } = usePackageRelease({
     is_latest: true,
-    package_name: fullPackageName,
+    package_name: `${author}/${packageName}`,
   })
 
   const { data: packageFiles } = usePackageFiles(
@@ -29,10 +24,14 @@ export const ViewPackagePage = () => {
       packageFiles={packageFiles as any}
       packageInfo={packageInfo as any}
       importantFilePaths={["README.md", "LICENSE", "package.json"]}
-      onFileClicked={() => {}}
-      onDirectoryClicked={() => {}}
-      onExportClicked={() => {}}
-      onEditClicked={() => {}}
+      onFileClicked={(file) => {
+        setLocation(
+          `/editor?package_id=${packageInfo?.package_id}&file_path=${file.file_path}`,
+        )
+      }}
+      onEditClicked={() => {
+        setLocation(`/editor?package_id=${packageInfo?.package_id}`)
+      }}
     />
   )
 }

package/public/placeholder-logo.svg

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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/components/ViewPackagePage/components/repo-tab-header.tsx

@@ -1,12 +0,0 @@
-interface RepoTabHeaderProps {
-  activeTab: string
-  setActiveTab: (tab: string) => void
-}
-
-export default function RepoTabHeader({
-  activeTab,
-  setActiveTab,
-}: RepoTabHeaderProps) {
-  // This component is being handled by a different team
-  return null
-}

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

@@ -1,120 +0,0 @@
-"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}
-    />
-  )
-}