0ct0pu5/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Nicolas Meienberger 2023-03-28 21:24:27 +02:00
parent 91237df378
commit f259061e47
4 changed files with 91 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/client/components/ui/tabs/index.ts Normal file
View file

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

11
src/client/components/ui/tabs/tabs.module.scss Normal file
View file

@ -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);
}
}

39
src/client/components/ui/tabs/tabs.tsx Normal file
View file

@ -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 };

93
src/client/modules/Apps/components/AppDetailsTabs.tsx
View file

@ -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">
<div style={{ marginTop: -1, marginBottom: -3 }} className="card-header">
<ul className="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
<li className="nav-item">
<a className="nav-link active" href="#tabs-description" data-bs-toggle="tab" role="tab" aria-selected="true">
Description
<Tabs defaultValue="description" orientation="vertical" style={{ marginTop: -1 }}>
<TabsList>
<TabsTrigger value="description">Description</TabsTrigger>
<TabsTrigger value="info">Base Info</TabsTrigger>
</TabsList>
<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>
<li className="nav-item">
<a className="nav-link" href="#tabs-links" data-bs-toggle="tab" role="tab" aria-selected="true">
Base Info
</a>
</li>
</ul>
</div>
<div className="card-body">
<div className="tab-content">
<div className="tab-pane active" id="tabs-description" role="tabpanel">
<Markdown className="markdown">{info.description}</Markdown>
</div>
<div className="tab-pane" id="tabs-links" role="tabpanel">
<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>
</DataGridItem>
<DataGridItem title="Author">{info.author}</DataGridItem>
<DataGridItem title="Port">
<b>{info.port}</b>
</DataGridItem>
<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>
</DataGridItem>
<DataGridItem title="Author">{info.author}</DataGridItem>
<DataGridItem title="Port">
<b>{info.port}</b>
</DataGridItem>
<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>
</TabsContent>
</Tabs>
);