130 lines
5.4 KiB
TypeScript
130 lines
5.4 KiB
TypeScript
import React from 'react';
|
|
import '../css/custom.css';
|
|
import Layout from '@theme/Layout';
|
|
import { TooltipProvider } from '../../../../platform/ui-next/src/components/Tooltip';
|
|
|
|
// Navigation card components
|
|
import { Card, CardHeader, CardTitle, CardDescription } from '../../../../platform/ui-next/src/components/Card';
|
|
import { Icons } from '../../../../platform/ui-next/src/components/Icons';
|
|
|
|
/* Showcase components (alphabetical) */
|
|
// import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
|
|
import ButtonShowcase from './components/ButtonShowcase';
|
|
import CheckboxShowcase from './components/CheckboxShowcase';
|
|
// import CinePlayerShowcase from './components/CinePlayerShowcase';
|
|
import ComboboxShowcase from './components/ComboboxShowcase';
|
|
import DataRowShowcase from './components/DataRowShowcase';
|
|
import DialogShowcase from './components/DialogShowcase';
|
|
import DropdownMenuShowcase from './components/DropdownMenuShowcase';
|
|
import HoverCardShowcase from './components/HoverCardShowcase';
|
|
import InputShowcase from './components/InputShowcase';
|
|
import LabelShowcase from './components/LabelShowcase';
|
|
import NumericMetaShowcase from './components/NumericMetaShowcase';
|
|
import PanelSectionShowcase from './components/PanelSectionShowcase';
|
|
import PopoverShowcase from './components/PopoverShowcase';
|
|
import ScrollAreaShowcase from './components/ScrollAreaShowcase';
|
|
import SelectShowcase from './components/SelectShowcase';
|
|
import SliderShowcase from './components/SliderShowcase';
|
|
import SwitchShowcase from './components/SwitchShowcase';
|
|
import TabsShowcase from './components/TabsShowcase';
|
|
import ToastShowcase from './components/ToastShowcase';
|
|
import ToolButtonShowcase from './components/ToolButtonShowcase';
|
|
import ToolButtonListShowcase from './components/ToolButtonListShowcase';
|
|
import TooltipShowcase from './components/TooltipShowcase';
|
|
|
|
/**
|
|
* Components List page that displays all available UI components
|
|
*/
|
|
export default function ComponentsList() {
|
|
return (
|
|
<Layout
|
|
title="Components"
|
|
description="OHIF Viewer Components"
|
|
>
|
|
<TooltipProvider>
|
|
<div className="text-foreground min-h-screen bg-black">
|
|
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
|
|
{/* Navigation cards */}
|
|
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
|
|
<a
|
|
href="/colors-and-type"
|
|
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
|
|
>
|
|
<Card className="hover:bg-primary/30 w-full transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="text-foreground text-xl">
|
|
<Icons.ColorChange className="h-12 w-12" />
|
|
Colors & Typography
|
|
</CardTitle>
|
|
<CardDescription className="text-lg">
|
|
Color Palette and Typography Guidelines
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</a>
|
|
<a
|
|
href="/components-list"
|
|
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
|
|
>
|
|
<Card className="hover:bg-primary/30 w-full transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="text-foreground text-xl">
|
|
<Icons.ColorChange className="h-12 w-12" />
|
|
Components
|
|
</CardTitle>
|
|
<CardDescription className="text-lg">
|
|
Essential UI Components with Variants
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</a>
|
|
<a
|
|
href="/patterns"
|
|
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
|
|
>
|
|
<Card className="hover:bg-primary/30 w-full transition-colors">
|
|
<CardHeader>
|
|
<CardTitle className="text-foreground text-xl">
|
|
<Icons.ColorChange className="h-12 w-12" />
|
|
Patterns
|
|
</CardTitle>
|
|
<CardDescription className="text-lg">
|
|
Component-Based Layout Examples
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</a>
|
|
</div>
|
|
|
|
<h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1>
|
|
|
|
{/* <AllinOneMenuShowcase /> */}
|
|
<ButtonShowcase />
|
|
<CheckboxShowcase />
|
|
{/* <CinePlayerShowcase /> */}
|
|
<ComboboxShowcase />
|
|
<DataRowShowcase />
|
|
<DialogShowcase />
|
|
<DropdownMenuShowcase />
|
|
<HoverCardShowcase />
|
|
<InputShowcase />
|
|
<LabelShowcase />
|
|
<NumericMetaShowcase />
|
|
<PanelSectionShowcase />
|
|
<PopoverShowcase />
|
|
<ScrollAreaShowcase />
|
|
<SelectShowcase />
|
|
<SliderShowcase />
|
|
<SwitchShowcase />
|
|
<TabsShowcase />
|
|
<ToastShowcase />
|
|
<ToolButtonShowcase />
|
|
<ToolButtonListShowcase />
|
|
<TooltipShowcase />
|
|
</div>
|
|
</div>
|
|
</TooltipProvider>
|
|
</Layout>
|
|
);
|
|
}
|