@tscircuit/fake-snippets 0.0.27 → 0.0.28

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import { useState, useEffect, useMemo } from "react"
+import MainContentHeader from "./main-content-header"
+import Sidebar from "./sidebar"
+import MobileSidebar from "./mobile-sidebar"
+import ImportantFilesView from "./important-files-view"
+import { ShikiCodeViewer } from "./ShikiCodeViewer"
+
+// Tab Views
+import FilesView from "./tab-views/files-view"
+import ThreeDView from "./tab-views/3d-view"
+import PCBView from "./tab-views/pcb-view"
+import SchematicView from "./tab-views/schematic-view"
+import BOMView from "./tab-views/bom-view"
+import { isPackageFileImportant } from "../utils/is-package-file-important"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import ViewSnippetHeader from "@/components/ViewSnippetHeader"
+import PackageHeader from "./package-header"
+
+interface PackageFile {
+  package_file_id: string
+  package_release_id: string
+  file_path: string
+  content_text: string
+  created_at: string // iso-8601
+}
+
+interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  ai_usage_instructions: string
+  creator_account_id?: string
+  owner_org_id?: string
+}
+
+interface RepoPageContentProps {
+  packageFiles?: PackageFile[]
+  importantFilePaths?: string[]
+  packageInfo?: PackageInfo
+  onFileClicked?: (file: any) => void
+  onDirectoryClicked?: (directory: any) => void
+  onExportClicked?: (exportType: string) => void
+  onEditClicked?: () => void
+}
+
+export default function RepoPageContent({
+  packageFiles,
+  packageInfo,
+  onFileClicked,
+  onDirectoryClicked,
+  onExportClicked,
+  onEditClicked,
+}: RepoPageContentProps) {
+  const [activeView, setActiveView] = useState("files")
+
+  const importantFilePaths = packageFiles
+    ?.filter((pf) => isPackageFileImportant(pf.file_path))
+    ?.map((pf) => pf.file_path)
+
+  // Parse package files to determine directories and files structure
+  const { directories, files } = useMemo(() => {
+    if (!packageFiles) {
+      return { directories: [], files: [] }
+    }
+
+    const dirs = new Set<string>()
+    const filesList: Array<{
+      type: "file"
+      path: string
+      name: string
+      created_at: string
+    }> = []
+
+    packageFiles.forEach((file) => {
+      // Extract directory path
+      const pathParts = file.file_path.split("/")
+      const fileName = pathParts.pop() || ""
+
+      // Add all parent directories
+      let currentPath = ""
+      pathParts.forEach((part) => {
+        currentPath += (currentPath ? "/" : "") + part
+        dirs.add(currentPath)
+      })
+
+      filesList.push({
+        type: "file",
+        path: file.file_path,
+        name: fileName,
+        created_at: file.created_at,
+      })
+    })
+
+    // Convert directories set to array of directory objects
+    const dirsList = Array.from(dirs)
+      .map((path) => {
+        const pathParts = path.split("/")
+        if (!path) return null
+        return {
+          type: "directory",
+          path,
+          name: pathParts[pathParts.length - 1],
+        }
+      })
+      .filter((dir) => dir !== null)
+
+    return {
+      directories: dirsList,
+      files: filesList,
+    }
+  }, [packageFiles])
+
+  // Find important files based on importantFilePaths
+  const importantFiles = useMemo(() => {
+    if (!packageFiles || !importantFilePaths) return []
+
+    return packageFiles.filter((file) =>
+      importantFilePaths.some((path) => file.file_path.endsWith(path)),
+    )
+  }, [packageFiles, importantFilePaths])
+
+  // Render the appropriate content based on the active view
+  const renderContent = () => {
+    switch (activeView) {
+      case "files":
+        return (
+          <FilesView
+            directories={directories as any}
+            files={files as any}
+            isLoading={!packageFiles}
+            onFileClicked={onFileClicked}
+            onDirectoryClicked={onDirectoryClicked}
+          />
+        )
+      case "3d":
+        return <ThreeDView />
+      case "pcb":
+        return <PCBView />
+      case "schematic":
+        return <SchematicView />
+      case "bom":
+        return <BOMView />
+      default:
+        return (
+          <FilesView
+            directories={directories as any}
+            files={files as any}
+            isLoading={!packageFiles}
+            onFileClicked={onFileClicked}
+            onDirectoryClicked={onDirectoryClicked}
+          />
+        )
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-[#0d1117] text-gray-900 dark:text-[#c9d1d9] font-sans">
+      <Header />
+      <PackageHeader packageInfo={packageInfo} />
+
+      {/* Mobile Sidebar */}
+      <div className="max-w-[1200px] mx-auto">
+        <MobileSidebar packageInfo={packageInfo} isLoading={!packageInfo} />
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-[1200px] mx-auto">
+        <div className="flex flex-col md:flex-row">
+          {/* Main Content Area */}
+          <div className="w-full md:flex-1 border-r border-gray-200 dark:border-[#30363d] p-4 md:max-w-[calc(100%-296px)] max-w-full">
+            {/* Main Content Header with Tabs */}
+            <MainContentHeader
+              activeView={activeView}
+              onViewChange={setActiveView}
+              onExportClicked={onExportClicked}
+              packageInfo={packageInfo}
+            />
+
+            {/* Dynamic Content based on active view */}
+            {renderContent()}
+
+            {/* Important Files View - Always shown */}
+            <ImportantFilesView
+              importantFiles={importantFiles}
+              isLoading={!packageFiles}
+              onEditClicked={onEditClicked}
+              aiDescription={packageInfo?.ai_description}
+              aiUsageInstructions={packageInfo?.ai_usage_instructions}
+            />
+          </div>
+
+          {/* Sidebar - Hidden on mobile, shown on md and up */}
+          <div className="hidden md:block md:w-[296px] flex-shrink-0">
+            <Sidebar
+              packageInfo={packageInfo}
+              isLoading={!packageInfo}
+              onViewChange={(view) => {
+                setActiveView(view)
+              }}
+            />
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/components/ViewPackagePage/components/repo-tab-header.tsx

@@ -0,0 +1,12 @@
+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/components/sidebar-about-section.tsx

@@ -0,0 +1,103 @@
+import { Badge } from "@/components/ui/badge"
+import { GitFork, Star } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+
+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
+  is_package?: boolean
+  website?: string
+}
+
+interface SidebarAboutSectionProps {
+  packageInfo?: PackageInfo
+  isLoading?: boolean
+}
+
+const LinkIcon = () => (
+  <svg className="h-4 w-4 mr-1" viewBox="0 0 16 16" fill="currentColor">
+    <path d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25Zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0Z"></path>
+  </svg>
+)
+
+export default function SidebarAboutSection({
+  packageInfo,
+  isLoading = false,
+}: SidebarAboutSectionProps) {
+  const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
+
+  if (isLoading) {
+    return (
+      <div className="mb-6">
+        <h2 className="text-lg font-semibold mb-2">About</h2>
+        <Skeleton className="h-4 w-full mb-3" />
+        <Skeleton className="h-4 w-3/4 mb-4" />
+        <div className="flex flex-wrap gap-2 mb-4">
+          {[1, 2, 3].map((i) => (
+            <Skeleton key={i} className="h-6 w-20 rounded-full" />
+          ))}
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-20" />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-semibold mb-2">About</h2>
+      <p className="text-sm mb-3">
+        {packageInfo?.description || packageInfo?.ai_description}
+      </p>
+      {packageInfo?.website && (
+        <a
+          href="#"
+          className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm flex items-center mb-4"
+        >
+          <LinkIcon />
+          {packageInfo?.website}
+        </a>
+      )}
+      <div className="flex flex-wrap gap-2 mb-4">
+        {topics.map((topic, index) => (
+          <Badge
+            key={index}
+            variant="outline"
+            className="text-xs rounded-full px-2 py-0.5 bg-blue-100 dark:bg-[#1f6feb33] text-blue-600 dark:text-[#58a6ff] border-blue-300 dark:border-[#1f6feb66]"
+          >
+            {topic}
+          </Badge>
+        ))}
+      </div>
+      <div className="space-y-2 text-sm">
+        <div className="flex items-center">
+          <svg
+            className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]"
+            viewBox="0 0 16 16"
+            fill="currentColor"
+          >
+            <path d="M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.29.736c-.264.152-.563.231-.868.231h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.53.53-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.29-.736c.263-.15.561-.231.865-.231H7.25V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z"></path>
+          </svg>
+          <span>MIT license</span>
+        </div>
+        <div className="flex items-center">
+          <Star className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+          <span>{packageInfo?.star_count || "16"} stars</span>
+        </div>
+        <div className="flex items-center">
+          <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
+          <span>39 forks</span>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+import { Badge } from "@/components/ui/badge"
+
+export default function SidebarContributorsSection() {
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-2">
+        <h2 className="text-lg font-semibold">Contributors</h2>
+        <Badge
+          variant="outline"
+          className="text-xs rounded-full px-2 py-0.5 bg-transparent border-gray-300 dark:border-[#30363d]"
+        >
+          18
+        </Badge>
+      </div>
+      <div className="flex flex-wrap gap-1 mb-2">
+        {[...Array(10)].map((_, i) => (
+          <div
+            key={i}
+            className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500"
+          ></div>
+        ))}
+      </div>
+      <a
+        href="#"
+        className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm"
+      >
+        + 4 contributors
+      </a>
+    </div>
+  )
+}

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

@@ -0,0 +1,16 @@
+export default function SidebarPackagesSection() {
+  return (
+    <div className="mb-6">
+      <h2 className="text-lg font-semibold mb-2">Packages</h2>
+      <p className="text-sm text-gray-500 dark:text-[#8b949e] mb-1">
+        No packages published
+      </p>
+      <a
+        href="#"
+        className="text-blue-600 dark:text-[#58a6ff] hover:underline text-sm"
+      >
+        Publish your first package
+      </a>
+    </div>
+  )
+}

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>
+  )
+}