mirror of
https://github.com/meienberger/runtipi.git
synced 2024-08-16 15:40:24 +03:00
feat(components): create new tabs component with radix-ui primitive
This commit is contained in:
parent
b19d30cce3
commit
7915192aae
1
src/client/components/ui/tabs/index.ts
Normal file
1
src/client/components/ui/tabs/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { Tabs, TabsList, TabsContent, TabsTrigger } from './tabs';
|
11
src/client/components/ui/tabs/tabs.module.scss
Normal file
11
src/client/components/ui/tabs/tabs.module.scss
Normal 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
39
src/client/components/ui/tabs/tabs.tsx
Normal 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 };
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user