gradio/js/storybook/design-tokens/Icons.stories.svelte
2024-06-24 21:41:06 +00:00

156 lines
3.0 KiB
Svelte

<script>
// @ts-nocheck
import { Meta, Story } from "@storybook/addon-svelte-csf";
import {
Error,
Brush,
Camera,
Chart,
Chat,
Check,
Circle,
Clear,
Code,
Color,
Community,
Copy,
Download,
DropdownArrow,
Edit,
Erase,
File,
Info,
Image,
JSON,
LineChart,
Maximise,
Music,
Pause,
Play,
Plot,
Remove,
Sketch,
Square,
Table,
TextHighlight,
Trash,
Tree,
Undo,
Video,
Warning
} from "../../icons/src";
const icons = [
{ name: "error", value: Error },
{ name: "brush", value: Brush },
{ name: "Camera", value: Camera },
{ name: "Chart", value: Chart },
{ name: "Chat", value: Chat },
{ name: "Check", value: Check },
{ name: "Circle", value: Circle },
{ name: "Clear", value: Clear },
{ name: "Code", value: Code },
{ name: "Color", value: Color },
{ name: "Community", value: Community },
{ name: "Copy", value: Copy },
{ name: "Download", value: Download },
{ name: "DropdownArrow", value: DropdownArrow },
{ name: "Edit", value: Edit },
{ name: "Erase", value: Erase },
{ name: "File", value: File },
{ name: "Info", value: Info },
{ name: "Image", value: Image },
{ name: "JSON", value: JSON },
{ name: "LineChart", value: LineChart },
{ name: "Maximise", value: Maximise },
{ name: "Music", value: Music },
{ name: "Pause", value: Pause },
{ name: "Play", value: Play },
{ name: "Plot", value: Plot },
{ name: "Remove", value: Remove },
{ name: "Sketch", value: Sketch },
{ name: "Square", value: Square },
{ name: "Table", value: Table },
{ name: "TextHighlight", value: TextHighlight },
{ name: "Trash", value: Trash },
{ name: "Tree", value: Tree },
{ name: "Undo", value: Undo },
{ name: "Video", value: Video },
{ name: "Warning", value: Warning }
];
</script>
<Meta title="Design System/Icons" />
<Story name="Icons">
<div class="wrapper">
<section>
<h1>Icons</h1>
</section>
<div class="container">
{#each icons as Icon}
<div class="icon-wrapper">
<div class="icon-name">{Icon.name}</div>
<div
style="display: flex; flex-direction: column; align-items: center; width: 50px; height: 50px;"
>
<Icon.value />
</div>
</div>
{/each}
</div>
</div>
</Story>
<style>
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--font);
}
.icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-name {
font: var(--font-sans);
color: var(--block-title-text-color);
font-weight: var(--block-title-text-weight);
font-size: var(--block-title-text-size);
}
section {
background: #fb923c;
height: 50px;
width: 90%;
display: flex;
align-items: center;
border-radius: 15px;
padding: 50px;
margin: 20px;
}
section h1 {
color: white;
font-weight: 700;
font-size: 3em;
}
.container {
display: grid;
gap: 20px;
grid-template-columns: repeat(6, 1fr);
padding: 20px;
}
@media (max-width: 768px) {
.container {
grid-template-columns: repeat(3, 1fr);
}
}
</style>