feat(components): create new tabs component with radix-ui primitive

src/client/components/ui/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs, TabsList, TabsContent, TabsTrigger } from './tabs';

src/client/components/ui/tabs/tabs.module.scss

@@ -0,0 +1,11 @@
+.trigger[data-state='active'] {
+  background-color: var(--tblr-card-bg);
+  color: var(--tblr-nav-tabs-link-active-color);
+  border-color: var(--tblr-nav-tabs-link-active-border-color);
+  border-bottom-color: var(--tblr-card-bg);
+
+  &:focus,
+  &:hover {
+    border-bottom-color: var(--tblr-card-bg);
+  }
+}

src/client/components/ui/tabs/tabs.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import clsx from 'clsx';
+import styles from './tabs.module.scss';
+
+const Tabs = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Root>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>>(({ className, children, ...props }, ref) => (
+  <TabsPrimitive.Root ref={ref} className={clsx('card', className)} {...props}>
+    {children}
+  </TabsPrimitive.Root>
+));
+
+const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>>(({ className, children, ...props }, ref) => (
+  <TabsPrimitive.List ref={ref} className={clsx('', className)} {...props}>
+    <div className="card-header">
+      <div className="nav nav-tabs card-header-tabs">{children}</div>
+    </div>
+  </TabsPrimitive.List>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>>(({ className, children, ...props }, ref) => {
+  return (
+    <TabsPrimitive.Trigger className={clsx(styles.trigger, 'nav-link', className)} {...props} ref={ref}>
+      <li className="nav-item">{children}</li>
+    </TabsPrimitive.Trigger>
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>>(({ className, children, ...props }, ref) => (
+  <TabsPrimitive.Content className={clsx('', className)} {...props} ref={ref}>
+    <div className="card-body">{children}</div>
+  </TabsPrimitive.Content>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/client/modules/Apps/components/AppDetailsTabs.tsx

@@ -1,5 +1,6 @@
 import { IconExternalLink } from '@tabler/icons-react';
 import React from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { DataGrid, DataGridItem } from '../../../components/ui/DataGrid';
 import Markdown from '../../../components/Markdown/Markdown';
 import { AppInfo } from '../../../core/types';
@@ -9,58 +10,44 @@ interface IProps {
 }
 
 export const AppDetailsTabs: React.FC<IProps> = ({ info }) => (
-  <div className="card">
+  <Tabs defaultValue="description" orientation="vertical" style={{ marginTop: -1 }}>
-    <div style={{ marginTop: -1, marginBottom: -3 }} className="card-header">
+    <TabsList>
-      <ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
+      <TabsTrigger value="description">Description</TabsTrigger>
-        <li className="nav-item">
+      <TabsTrigger value="info">Base Info</TabsTrigger>
-          <a className="nav-link active" href="#tabs-description" data-bs-toggle="tab" role="tab" aria-selected="true">
+    </TabsList>
-            Description
+    <TabsContent value="description">
+      <Markdown className="markdown">{info.description}</Markdown>
+    </TabsContent>
+    <TabsContent value="info">
+      <DataGrid>
+        <DataGridItem title="Source code">
+          <a target="_blank" rel="noreferrer" className="text-blue-500 text-xs" href={info.source}>
+            Link
+            <IconExternalLink size={15} className="ms-1 mb-1" />
           </a>
-        </li>
+        </DataGridItem>
-        <li className="nav-item">
+        <DataGridItem title="Author">{info.author}</DataGridItem>
-          <a className="nav-link" href="#tabs-links" data-bs-toggle="tab" role="tab" aria-selected="true">
+        <DataGridItem title="Port">
-            Base Info
+          <b>{info.port}</b>
-          </a>
+        </DataGridItem>
-        </li>
+        <DataGridItem title="Categories">
-      </ul>
+          {info.categories.map((c) => (
-    </div>
+            <div key={c} className="badge bg-green me-1">
-    <div className="card-body">
+              {c.toLowerCase()}
-      <div className="tab-content">
+            </div>
-        <div className="tab-pane active" id="tabs-description" role="tabpanel">
+          ))}
-          <Markdown className="markdown">{info.description}</Markdown>
+        </DataGridItem>
-        </div>
+        <DataGridItem title="Version">{info.version}</DataGridItem>
-        <div className="tab-pane" id="tabs-links" role="tabpanel">
+        {info.supported_architectures && (
-          <DataGrid>
+          <DataGridItem title="Supported architectures">
-            <DataGridItem title="Source code">
+            {info.supported_architectures.map((a) => (
-              <a target="_blank" rel="noreferrer" className="text-blue-500 text-xs" href={info.source}>
+              <div key={a} className="badge bg-red me-1">
-                Link
+                {a.toLowerCase()}
-                <IconExternalLink size={15} className="ms-1 mb-1" />
+              </div>
-              </a>
+            ))}
-            </DataGridItem>
+          </DataGridItem>
-            <DataGridItem title="Author">{info.author}</DataGridItem>
+        )}
-            <DataGridItem title="Port">
+      </DataGrid>
-              <b>{info.port}</b>
+    </TabsContent>
-            </DataGridItem>
+  </Tabs>
-            <DataGridItem title="Categories">
-              {info.categories.map((c) => (
-                <div key={c} className="badge bg-green me-1">
-                  {c.toLowerCase()}
-                </div>
-              ))}
-            </DataGridItem>
-            <DataGridItem title="Version">{info.version}</DataGridItem>
-            {info.supported_architectures && (
-              <DataGridItem title="Supported architectures">
-                {info.supported_architectures.map((a) => (
-                  <div key={a} className="badge bg-red me-1">
-                    {a.toLowerCase()}
-                  </div>
-                ))}
-              </DataGridItem>
-            )}
-          </DataGrid>
-        </div>
-      </div>
-    </div>
-  </div>
 );