Refactor ProjectsView to use updated Tabs component and adjust loading strategy

- Moved Tabs import in ProjectsView to the correct location.
- Updated Tabs component in ui/tabs.tsx to use BaseTabs from @base-ui-components/react/tabs, adding context and improved structure.
- Enhanced Tabs functionality with TabIndicator and improved styling options.
- Changed project loading strategy in projects.astro from client:load to client:only for better performance.

astro-app/src/components/ProjectsView.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 import { ProjectsTable } from './ProjectsTable';
 import { ProjectCard } from './ProjectCard';
 import { ThemeToggle } from './ThemeToggle';
 import { LayoutGrid, Table } from 'lucide-react';
 import { Button } from './ui/button';
 import type { TwitterProject } from '@/lib/csv-loader';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
 
 interface ProjectsViewProps {
   projects: TwitterProject[];
@@ -18,6 +18,8 @@ export function ProjectsView({ projects }: ProjectsViewProps) {
   const projectsWithUrls = projects.filter(p => p.project_url);
   const projectsWithoutUrls = projects.filter(p => !p.project_url);
 
+  console.log(projects);
+
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto px-6 py-8">

astro-app/src/components/ui/tabs.tsx

@@ -1,68 +1,115 @@
 import * as React from "react"
+import { Tabs as BaseTabs } from "@base-ui-components/react/tabs"
 
 import { cn } from "@/lib/utils"
 
-const Tabs = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("w-full", className)}
-    {...props}
-  />
-))
-Tabs.displayName = "Tabs"
+type TabsVariant = "capsule" | "underline"
 
-const TabsList = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = "TabsList"
+type TabsContext = {
+	variant: TabsVariant
+}
 
-const TabsTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    value: string
-  }
->(({ className, value, children, ...props }, ref) => (
-  <button
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </button>
-))
-TabsTrigger.displayName = "TabsTrigger"
+const TabsContext = React.createContext<TabsContext | null>(null)
 
-const TabsContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    value: string
-  }
->(({ className, value, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = "TabsContent"
+const useTabs = () => {
+	const context = React.useContext(TabsContext)
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+	if (!context) {
+		throw new Error("useTabs must be used within a Tabs")
+	}
+
+	return context
+}
+
+function Tabs({
+	variant = "capsule",
+	className,
+	...props
+}: React.ComponentProps<typeof BaseTabs.Root> & {
+	variant?: TabsVariant
+}) {
+	return (
+		<TabsContext.Provider value={{ variant }}>
+			<BaseTabs.Root
+				data-slot="tabs"
+				className={cn("flex flex-col gap-2", className)}
+				{...props}
+			/>
+		</TabsContext.Provider>
+	)
+}
+
+function TabsList({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof BaseTabs.List>) {
+	const { variant } = useTabs()
+
+	return (
+		<BaseTabs.List
+			data-slot="tabs-list"
+			className={cn(
+				"text-muted-foreground relative inline-flex h-9 w-fit items-center justify-center gap-x-1 p-1",
+				variant === "capsule" ? "bg-muted rounded-lg" : "",
+				className
+			)}
+			{...props}
+		>
+			{children}
+			<TabIndicator />
+		</BaseTabs.List>
+	)
+}
+
+function TabsTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof BaseTabs.Tab>) {
+	return (
+		<BaseTabs.Tab
+			data-slot="tabs-trigger"
+			className={cn(
+				"text-muted-foreground data-selected:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] z-[1] flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm text-nowrap whitespace-nowrap focus-visible:ring-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TabIndicator({
+	className,
+	...props
+}: React.ComponentProps<typeof BaseTabs.Indicator>) {
+	const { variant } = useTabs()
+
+	return (
+		<BaseTabs.Indicator
+			data-slot="tab-indicator"
+			className={cn(
+				"absolute left-0 w-[var(--active-tab-width)] translate-x-[var(--active-tab-left)] -translate-y-1/2 transition-all duration-300 ease-in-out",
+				variant === "underline"
+					? "bg-primary top-full z-10 h-px"
+					: "bg-input top-1/2 -z-10 h-[var(--active-tab-height)] rounded-md border shadow-sm",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function TabsContent({
+	className,
+	...props
+}: React.ComponentProps<typeof BaseTabs.Panel>) {
+	return (
+		<BaseTabs.Panel
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
+			{...props}
+		/>
+	)
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

astro-app/src/pages/projects.astro

@@ -24,7 +24,7 @@ const projects = await loadTwitterProjects();
     </script>
   </head>
   <body>
-    <ProjectsView client:load projects={projects} />
+    <ProjectsView client:only projects={projects} />
   </body>
 </html>
 </html>