npm - @tscircuit/fake-snippets - Versions diffs - 0.0.102 → 0.0.103 - Mend

@tscircuit/fake-snippets 0.0.102 → 0.0.103

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/fake-snippets-api/routes/api/packages/update.ts CHANGED Viewed

@@ -18,7 +18,7 @@ export default withRouteSpec({
         .optional(),
       description: z.string().optional(),
       website: z.string().optional(),
-      github_repo_full_name: z.string().optional(),
+      github_repo_full_name: z.string().nullable().optional(),
       is_private: z.boolean().optional(),
       is_unlisted: z.boolean().optional(),
       default_view: z.enum(["files", "3d", "pcb", "schematic"]).optional(),
@@ -84,7 +84,9 @@ export default withRouteSpec({
     unscoped_name: name ?? existingPackage.unscoped_name,
     website: website ?? existingPackage.website,
     github_repo_full_name:
-      github_repo_full_name ?? existingPackage.github_repo_full_name,
+      github_repo_full_name === null
+        ? null
+        : (github_repo_full_name ?? existingPackage.github_repo_full_name),
     is_private: is_private ?? existingPackage.is_private,
     is_public:
       is_private !== undefined ? !is_private : existingPackage.is_public,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.102",
+  "version": "0.0.103",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/ui/badge"
-import { GitFork, Star, Settings, LinkIcon } from "lucide-react"
+import { GitFork, Star, Settings, LinkIcon, Github } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
@@ -10,6 +10,7 @@ import { useState, useEffect, useMemo } from "react"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
 import { PackageInfo } from "@/lib/types"
 interface SidebarAboutSectionProps {
   packageInfo?: PackageInfo
   isLoading?: boolean
@@ -163,6 +164,16 @@ export default function SidebarAboutSection({
             <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
             <span>{(packageInfo as any)?.fork_count ?? "0"} forks</span>
           </div>
+          {packageInfo?.github_repo_full_name && (
+            <a
+              target="_blank"
+              href={`https://github.com/${packageInfo.github_repo_full_name}`}
+              className="flex items-center  hover:underline hover:underline-offset-2 cursor-pointer hover:decoration-gray-500"
+            >
+              <Github className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+              <span>{packageInfo?.github_repo_full_name.split("/")[1]}</span>
+            </a>
+          )}
         </div>
       </div>

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

@@ -5,6 +5,12 @@ import { usePackageReleaseById } from "@/hooks/use-package-release"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { BuildStatus, BuildStep } from "./build-status"
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
+import {
+  getBuildStatus,
+  getLatestBuildFromPackageRelease,
+  StatusIcon,
+} from "@/components/preview"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
 function getTranspilationStatus(
   pr?: PackageRelease | null,
@@ -68,6 +74,8 @@ export default function SidebarReleasesSection() {
     )
   }
+  const latestBuild = getLatestBuildFromPackageRelease(packageRelease)
+  const { status, label } = getBuildStatus(latestBuild)
   return (
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">Releases</h2>
@@ -89,6 +97,15 @@ export default function SidebarReleasesSection() {
             packageReleaseId={packageRelease.package_release_id}
           />
         ))}
+        {latestBuild && (
+          <PrefetchPageLink
+            href={`/build/${latestBuild.package_build_id}`}
+            className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
+          >
+            <StatusIcon status={status} />
+            <span>Package preview {label}</span>
+          </PrefetchPageLink>
+        )}
       </div>
       {/* <a href="#" className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm">
         Push a new release

package/src/components/dialogs/GitHubRepositorySelector.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useRef } from "react"
 import {
   Select,
   SelectContent,
@@ -11,27 +11,32 @@ import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useQuery } from "react-query"
 import { Button } from "../ui/button"
 import { Label } from "../ui/label"
-import { Plus } from "lucide-react"
+import { Minus, Plus } from "lucide-react"
+import { Switch } from "../ui/switch"
 interface GitHubRepositorySelectorProps {
-  value?: string
-  onValueChange?: (value: string) => void
+  selectedRepository?: string
+  setSelectedRepository?: (value: string | null) => void
   disabled?: boolean
   open?: boolean
+  addFormContent?: (data: {
+    enablePrPreview?: boolean
+    privateBuild?: boolean
+  }) => void
+  formData?: any
 }
 export const GitHubRepositorySelector = ({
-  value,
-  onValueChange,
+  selectedRepository,
+  setSelectedRepository,
   disabled = false,
   open = false,
+  addFormContent,
+  formData,
 }: GitHubRepositorySelectorProps) => {
   const axios = useAxios()
   const apiBaseUrl = useApiBaseUrl()
-  const [selectedRepository, setSelectedRepository] = useState<string>(
-    value || "",
-  )
+  const initialValue = useRef(selectedRepository).current
   // Fetch available repositories
   const { data: repositoriesData, error: repositoriesError } = useQuery(
     ["github-repositories"],
@@ -52,72 +57,127 @@ export const GitHubRepositorySelector = ({
   const handleValueChange = (newValue: string) => {
     if (newValue === "connect-more") {
       handleConnectMoreRepos()
+    } else if (newValue === "unlink//repo") {
+      setSelectedRepository?.("unlink//repo")
     } else {
-      setSelectedRepository(newValue)
-      onValueChange?.(newValue)
+      setSelectedRepository?.(newValue)
     }
   }
   return (
-    <div className="space-y-1">
-      <Label htmlFor="repository">GitHub Repository</Label>
-      {(repositoriesError as any)?.response?.status === 400 &&
-      (repositoriesError as any)?.response?.data?.error_code ===
-        "github_not_connected" ? (
-        <div className="space-y-2">
-          <div className="text-sm text-muted-foreground">
-            Connect your GitHub account to link this package to a repository.
+    <>
+      <div className="space-y-1 mb-3">
+        <Label htmlFor="repository">GitHub Repository</Label>
+        {(repositoriesError as any)?.response?.status === 400 &&
+        (repositoriesError as any)?.response?.data?.error_code ===
+          "github_not_connected" ? (
+          <div className="space-y-2">
+            <div className="text-sm text-muted-foreground">
+              Connect your GitHub account to link this package to a repository.
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleConnectMoreRepos}
+              className="w-full"
+              disabled={disabled}
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+              </svg>
+              Connect GitHub Account
+            </Button>
           </div>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleConnectMoreRepos}
-            className="w-full"
-            disabled={disabled}
-          >
-            <svg
-              className="w-4 h-4 mr-2"
-              viewBox="0 0 24 24"
-              fill="currentColor"
+        ) : (
+          <div className="space-y-2">
+            <Select
+              value={selectedRepository}
+              onValueChange={handleValueChange}
+              disabled={disabled}
             >
-              <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
-            </svg>
-            Connect GitHub Account
-          </Button>
-        </div>
-      ) : (
-        <div className="space-y-2">
-          <Select
-            value={selectedRepository}
-            onValueChange={handleValueChange}
-            disabled={disabled}
-          >
-            <SelectTrigger className="w-full">
-              <SelectValue placeholder="Select a repository" />
-            </SelectTrigger>
-            <SelectContent className="!z-[999]">
-              {repositoriesData?.repos?.map((repo: any) => (
-                <SelectItem key={repo.full_name} value={repo.full_name}>
-                  <div className="flex items-center space-x-2">
-                    <span>{repo.unscoped_name}</span>
-                    {repo.private && (
-                      <span className="text-xs text-muted-foreground">
-                        (private)
-                      </span>
-                    )}
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a repository" />
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                {repositoriesData?.repos?.map((repo: any) => (
+                  <SelectItem key={repo.full_name} value={repo.full_name}>
+                    <div className="flex items-center space-x-2">
+                      <span>{repo.unscoped_name}</span>
+                      {repo.private && (
+                        <span className="text-xs text-muted-foreground">
+                          (private)
+                        </span>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+                <SelectItem value="connect-more">
+                  <div className="flex items-center space-x-2 text-blue-600">
+                    <Plus className="w-3 h-3" />
+                    <span>Connect More Repos</span>
                   </div>
                 </SelectItem>
-              ))}
-              <SelectItem value="connect-more">
-                <div className="flex items-center space-x-2 text-blue-600">
-                  <Plus className="w-3 h-3" />
-                  <span>Connect More Repos</span>
-                </div>
-              </SelectItem>
-            </SelectContent>
-          </Select>
+                {Boolean(initialValue) && (
+                  <SelectItem value="unlink//repo">
+                    <div className="flex items-center space-x-2 text-red-600">
+                      <Minus className="w-3 h-3" />
+                      <span>Unlink Repo</span>
+                    </div>
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+      {initialValue && selectedRepository !== "unlink//repo" && (
+        <div className="space-y-4 mt-4 p-4 border rounded-lg bg-gray-50">
+          <h4 className="text-sm font-medium text-gray-900">
+            Repository Settings
+          </h4>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Private Build</Label>
+              <p className="text-xs text-gray-500">
+                Keep build previews private
+              </p>
+            </div>
+            <Switch
+              checked={formData?.privateBuild}
+              onCheckedChange={(checked) =>
+                addFormContent?.({
+                  privateBuild: checked,
+                })
+              }
+              disabled={disabled}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Enable PR Preview</Label>
+              <p className="text-xs text-gray-500">
+                Generate preview builds for pull requests
+              </p>
+            </div>
+            <Switch
+              checked={formData?.enablePrPreview}
+              onCheckedChange={(checked) =>
+                addFormContent?.({
+                  enablePrPreview: checked,
+                })
+              }
+              disabled={disabled}
+            />
+          </div>
         </div>
       )}
-    </div>
+    </>
   )
 }

package/src/components/dialogs/edit-package-details-dialog.tsx CHANGED Viewed

@@ -117,7 +117,10 @@ export const EditPackageDetailsDialog = ({
         website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
-        github_repo_full_name: formData.githubRepoFullName,
+        github_repo_full_name:
+          formData.githubRepoFullName === "unlink//repo"
+            ? null
+            : formData.githubRepoFullName,
         ...(formData.unscopedPackageName !== unscopedPackageName && {
           name: formData.unscopedPackageName.trim(),
         }),
@@ -377,8 +380,8 @@ export const EditPackageDetailsDialog = ({
                 </div>
                 <div className="space-y-1">
                   <GitHubRepositorySelector
-                    value={formData.githubRepoFullName || ""}
-                    onValueChange={(value) =>
+                    selectedRepository={formData.githubRepoFullName || ""}
+                    setSelectedRepository={(value) =>
                       setFormData((prev) => ({
                         ...prev,
                         githubRepoFullName: value,
@@ -386,6 +389,13 @@ export const EditPackageDetailsDialog = ({
                     }
                     disabled={updatePackageDetailsMutation.isLoading}
                     open={open}
+                    formData={formData}
+                    addFormContent={(content) => {
+                      setFormData((prev) => ({
+                        ...prev,
+                        ...content,
+                      }))
+                    }}
                   />
                 </div>
               </div>

package/src/components/preview/BuildsList.tsx CHANGED Viewed

@@ -25,15 +25,18 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import { getBuildStatus, PackageBuild, StatusIcon } from "."
+import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import { Package } from "fake-snippets-api/lib/db/schema"
-interface BuildsListProps {
-  builds: PackageBuild[]
+export const BuildsList = ({
+  pkg,
+  onSelectBuild,
+}: {
+  pkg: Package
   onSelectBuild?: (build: PackageBuild) => void
-}
-export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
+}) => {
+  const builds = MOCK_DEPLOYMENTS
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between">
@@ -41,10 +44,6 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
           <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
           <p className="text-gray-600">Manage and monitor your builds</p>
         </div>
-        <Button className="flex items-center gap-2">
-          <Plus className="w-4 h-4" />
-          Create Build
-        </Button>
       </div>
       <Card>
@@ -139,11 +138,15 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
                               </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                              <DropdownMenuItem>View Details</DropdownMenuItem>
-                              <DropdownMenuItem>View Logs</DropdownMenuItem>
-                              <DropdownMenuItem>Redeploy</DropdownMenuItem>
-                              <DropdownMenuItem className="text-red-600">
-                                Cancel
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Details
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onClick={() => onSelectBuild?.(build)}
+                              >
+                                View Logs
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -201,7 +204,7 @@ export const BuildsList = ({ builds, onSelectBuild }: BuildsListProps) => {
           <CardContent className="p-6">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-blue-100 rounded-lg">
-                <Loader2 className="w-5 h-5 text-blue-600" />
+                <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
               </div>
               <div>
                 <p className="text-sm text-gray-600">Building</p>

package/src/components/preview/{ConnectedReposCards.tsx → ConnectedPackagesList.tsx} RENAMED Viewed

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import { useState } from "react"
 import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -6,19 +6,56 @@ import { GitBranch, Rocket, Github } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PrefetchPageLink } from "../PrefetchPageLink"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { getBuildStatus, MOCK_DEPLOYMENTS, PackageBuild, StatusIcon } from "."
+import {
+  getBuildStatus,
+  getLatestBuildForPackage,
+  MOCK_DEPLOYMENTS,
+  PackageBuild,
+  StatusIcon,
+} from "."
+import { Package } from "fake-snippets-api/lib/db/schema"
-interface ConnectedRepoCardProps {
-  ConnectedRepo: PackageBuild
-  className?: string
+export const ConnectedPackageCardSkeleton = () => {
+  return (
+    <Card className="animate-pulse">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2 flex-1">
+            <div className="w-4 h-4 bg-gray-200 rounded" />
+            <div className="space-y-2 flex-1">
+              <div className="flex items-center gap-2">
+                <div className="w-12 h-4 bg-gray-200 rounded" />
+                <div className="w-16 h-3 bg-gray-200 rounded" />
+              </div>
+              <div className="w-20 h-3 bg-gray-200 rounded" />
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-0 space-y-3">
+        <div className="w-full h-4 bg-gray-200 rounded" />
+        <div className="flex gap-2">
+          <div className="w-16 h-3 bg-gray-200 rounded" />
+          <div className="w-20 h-3 bg-gray-200 rounded" />
+        </div>
+        <div className="flex gap-2 pt-2">
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+          <div className="flex-1 h-8 bg-gray-200 rounded" />
+        </div>
+      </CardContent>
+    </Card>
+  )
 }
-export const ConnectedRepoCard = ({
-  ConnectedRepo,
+export const ConnectedPackageCard = ({
+  pkg,
   className,
-}: ConnectedRepoCardProps) => {
-  const { status, label } = getBuildStatus(ConnectedRepo)
+}: {
+  pkg: Package
+  className?: string
+}) => {
+  const latestBuildInfo: PackageBuild = getLatestBuildForPackage(pkg)
+  const { status, label } = getBuildStatus(latestBuildInfo)
   return (
     <Card
       className={cn(
@@ -64,27 +101,27 @@ export const ConnectedRepoCard = ({
       <div className="flex items-center gap-2 mb-4">
         <Github className="w-4 h-4 text-gray-600" />
         <a
-          href={`https://github.com/${ConnectedRepo.commit_author}/tsc-deploy`}
+          href={`https://github.com/${pkg.github_repo_full_name}`}
           className="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors"
         >
-          {ConnectedRepo.commit_author}/tsc-deploy
+          {pkg.github_repo_full_name}
         </a>
       </div>
-      {ConnectedRepo.commit_message && (
+      {latestBuildInfo.commit_message && (
         <div className="mb-6 flex-1">
           <h4
-            title={ConnectedRepo.commit_message}
+            title={latestBuildInfo.commit_message}
             className="text-sm font-medium truncate text-gray-900 mb-2"
           >
-            {ConnectedRepo.commit_message}
+            {latestBuildInfo.commit_message}
           </h4>
           <div className="flex items-center gap-2 text-xs text-gray-500">
-            <span>{formatTimeAgo(ConnectedRepo.created_at)} on</span>
+            <span>{formatTimeAgo(latestBuildInfo.created_at)} on</span>
             <div className="flex items-center gap-1">
               <GitBranch className="w-3 h-3" />
               <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-medium">
-                {ConnectedRepo.branch_name || "main"}
+                {latestBuildInfo.branch_name || "main"}
               </span>
             </div>
           </div>
@@ -94,7 +131,7 @@ export const ConnectedRepoCard = ({
       <div className="flex gap-2 w-full mt-auto">
         <PrefetchPageLink
           className="w-full"
-          href={`/build/${ConnectedRepo.package_build_id}`}
+          href={`/build/${latestBuildInfo.package_build_id}`}
         >
           <Button
             size="sm"
@@ -103,10 +140,10 @@ export const ConnectedRepoCard = ({
             View
           </Button>
         </PrefetchPageLink>
-        {ConnectedRepo.preview_url && status === "success" && (
+        {latestBuildInfo.preview_url && status === "success" && (
           <PrefetchPageLink
             className="w-full"
-            href={`/build/${ConnectedRepo.package_build_id}/preview`}
+            href={`/build/${latestBuildInfo.package_build_id}/preview`}
           >
             <Button size="sm" variant="outline" className="px-4 py-2 w-full">
               Preview
@@ -118,53 +155,12 @@ export const ConnectedRepoCard = ({
   )
 }
-export const ConnectedRepoCardSkeleton: React.FC = () => {
-  return (
-    <Card className="animate-pulse">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2 flex-1">
-            <div className="w-4 h-4 bg-gray-200 rounded" />
-            <div className="space-y-2 flex-1">
-              <div className="flex items-center gap-2">
-                <div className="w-12 h-4 bg-gray-200 rounded" />
-                <div className="w-16 h-3 bg-gray-200 rounded" />
-              </div>
-              <div className="w-20 h-3 bg-gray-200 rounded" />
-            </div>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="pt-0 space-y-3">
-        <div className="w-full h-4 bg-gray-200 rounded" />
-        <div className="flex gap-2">
-          <div className="w-16 h-3 bg-gray-200 rounded" />
-          <div className="w-20 h-3 bg-gray-200 rounded" />
-        </div>
-        <div className="flex gap-2 pt-2">
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-export const ConnectedReposCards = ({ user }: { user: string }) => {
-  const [isLoading, setIsLoading] = useState(false)
-  const [ConnectedRepos, setConnectedRepos] = useState(MOCK_DEPLOYMENTS)
-  if (isLoading) {
-    return (
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-        {[...Array(6)].map((_, i) => (
-          <ConnectedRepoCardSkeleton key={i} />
-        ))}
-      </div>
-    )
-  }
+export const ConnectedPackagesList = ({
+  packages,
+}: { packages: Package[] }) => {
+  const [pkgs, setpkgs] = useState(MOCK_DEPLOYMENTS)
-  if (ConnectedRepos.length === 0) {
+  if (pkgs.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-20 text-black">
         <Rocket className="w-12 h-12 mb-4 text-black" />
@@ -182,8 +178,8 @@ export const ConnectedReposCards = ({ user }: { user: string }) => {
   return (
     <div className="space-y-4">
       <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-        {ConnectedRepos.map((repo) => (
-          <ConnectedRepoCard key={repo.package_build_id} ConnectedRepo={repo} />
+        {packages.map((pkg) => (
+          <ConnectedPackageCard key={pkg.package_id} pkg={pkg} />
         ))}
       </div>
     </div>