refactor: separate components

This commit is contained in:
2026-10-04 08:48:14 +05:00
parent f89811c116
commit c4eab38866
63 changed files with 529 additions and 645 deletions
+4 -4
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/catalog";
import CatalogGroup from "$lib/components/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
import ToolCard from "$lib/components/ToolCard.svelte";
import CatalogGroup from "$lib/components/catalog/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/catalog/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/catalog/CatalogToolbar.svelte";
import ToolCard from "$lib/components/catalog/ToolCard.svelte";
import {
pageDescription,
pageTitle,
+33 -10
View File
@@ -1,26 +1,28 @@
<script lang="ts">
import CheckerCanvas from "$lib/components/CheckerCanvas.svelte";
import CodeBlock from "$lib/components/CodeBlock.svelte";
import EmptyState from "$lib/components/EmptyState.svelte";
import ToolCard from "$lib/components/catalog/ToolCard.svelte";
import CheckerCanvas from "$lib/components/display/CheckerCanvas.svelte";
import CodeBlock from "$lib/components/display/CodeBlock.svelte";
import ImageCard from "$lib/components/display/ImageCard.svelte";
import MetaList from "$lib/components/display/MetaList.svelte";
import SettingGroup from "$lib/components/display/SettingGroup.svelte";
import SettingsFooter from "$lib/components/display/SettingsFooter.svelte";
import StepCard from "$lib/components/display/StepCard.svelte";
import EmptyState from "$lib/components/feedback/EmptyState.svelte";
import StatusLine from "$lib/components/feedback/StatusLine.svelte";
import CheckboxField from "$lib/components/fields/CheckboxField.svelte";
import ColorField from "$lib/components/fields/ColorField.svelte";
import SelectField from "$lib/components/fields/SelectField.svelte";
import SliderField from "$lib/components/fields/SliderField.svelte";
import TextField from "$lib/components/fields/TextField.svelte";
import ImageCard from "$lib/components/ImageCard.svelte";
import Panel from "$lib/components/layout/Panel.svelte";
import MetaList from "$lib/components/MetaList.svelte";
import SettingGroup from "$lib/components/SettingGroup.svelte";
import SettingsFooter from "$lib/components/SettingsFooter.svelte";
import StatusLine from "$lib/components/StatusLine.svelte";
import StepCard from "$lib/components/StepCard.svelte";
import ToolCard from "$lib/components/ToolCard.svelte";
import Badge from "$lib/components/ui/Badge.svelte";
import Button from "$lib/components/ui/Button.svelte";
import ChipButton from "$lib/components/ui/ChipButton.svelte";
import DownloadButton from "$lib/components/ui/DownloadButton.svelte";
import IconButton from "$lib/components/ui/IconButton.svelte";
import Segmented from "$lib/components/ui/Segmented.svelte";
import Toggle from "$lib/components/ui/Toggle.svelte";
import UploadButton from "$lib/components/ui/UploadButton.svelte";
import { Download, ImageOff, Plus, Trash2 } from "@lucide/svelte";
import { PAGES } from "$lib/registry";
@@ -52,6 +54,26 @@
<Button variant="outline" onclick={() => {}} label="Outline" />
<Button variant="accent" onclick={() => {}} label="Accent" />
<Button variant="danger" onclick={() => {}} label="Danger" />
<Button variant="clear" onclick={() => {}} label="Clear" />
</SettingGroup>
<SettingGroup label="size s">
<Button size="s" onclick={() => {}} label="Primary" />
<Button size="s" variant="outline" onclick={() => {}} label="Outline" />
<Button size="s" variant="clear" onclick={() => {}} label="Clear" />
<IconButton size="s" icon={Plus} label="Add" onclick={() => {}} />
<IconButton
size="s"
variant="clear"
icon={Trash2}
label="Delete"
onclick={() => {}}
/>
</SettingGroup>
<SettingGroup label="chips">
<ChipButton label="All" active onclick={() => {}} />
<ChipButton label="Convert" onclick={() => {}} />
<ChipButton label="0°" variant="outline" active onclick={() => {}} />
<ChipButton label="90°" variant="outline" onclick={() => {}} />
</SettingGroup>
<SettingGroup label="states">
<Button disabled onclick={() => {}} label="Disabled" />
@@ -71,6 +93,7 @@
</SettingGroup>
</div>
<SettingsFooter>
<UploadButton label="Open image" onfile={() => {}} />
<DownloadButton label="Download PNG" onclick={() => {}} />
</SettingsFooter>
</Panel>
+4 -4
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { PREVIEW_GROUPS, PREVIEW_TOTAL } from "$lib/catalog";
import CatalogGroup from "$lib/components/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/CatalogToolbar.svelte";
import ToolCard from "$lib/components/ToolCard.svelte";
import CatalogGroup from "$lib/components/catalog/CatalogGroup.svelte";
import CatalogHeader from "$lib/components/catalog/CatalogHeader.svelte";
import CatalogToolbar from "$lib/components/catalog/CatalogToolbar.svelte";
import ToolCard from "$lib/components/catalog/ToolCard.svelte";
import {
pageDescription,
pageTitle,
+2 -2
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import EmptyState from "$lib/components/EmptyState.svelte";
import SchemaToolView from "$lib/components/SchemaToolView.svelte";
import EmptyState from "$lib/components/feedback/EmptyState.svelte";
import SchemaToolView from "$lib/components/schema/SchemaToolView.svelte";
import { t } from "$lib/i18n/t";
import { getPageBySlug, getTool } from "$lib/registry";
import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";