chore(IconButon): delete unusual code
This commit is contained in:
@@ -1,105 +0,0 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import IconButton from './IconButton.svelte';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Shared/IconButton',
|
||||
component: IconButton,
|
||||
tags: ['autodocs'],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component:
|
||||
'Icon button with rotation animation on click. Features clockwise/counterclockwise rotation options and icon snippet support for flexible icon rendering.',
|
||||
},
|
||||
story: { inline: false },
|
||||
},
|
||||
layout: 'centered',
|
||||
},
|
||||
argTypes: {
|
||||
rotation: {
|
||||
control: 'select',
|
||||
options: ['clockwise', 'counterclockwise'],
|
||||
description: 'Direction of rotation animation on click',
|
||||
},
|
||||
icon: {
|
||||
control: 'object',
|
||||
description: 'Icon snippet to render (required)',
|
||||
},
|
||||
disabled: {
|
||||
control: 'boolean',
|
||||
description: 'Disable the button',
|
||||
},
|
||||
onclick: {
|
||||
action: 'clicked',
|
||||
description: 'Click handler',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import MinusIcon from '@lucide/svelte/icons/minus';
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
import XIcon from '@lucide/svelte/icons/x';
|
||||
</script>
|
||||
|
||||
{#snippet chevronRightIcon({ className }: { className: string })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet chevronLeftIcon({ className }: { className: string })}
|
||||
<ChevronLeft class={className} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet plusIcon({ className }: { className: string })}
|
||||
<PlusIcon class={className} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet minusIcon({ className }: { className: string })}
|
||||
<MinusIcon class={className} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet settingsIcon({ className }: { className: string })}
|
||||
<SettingsIcon class={className} />
|
||||
{/snippet}
|
||||
|
||||
{#snippet xIcon({ className }: { className: string })}
|
||||
<XIcon class={className} />
|
||||
{/snippet}
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
icon: chevronRightIcon,
|
||||
}}
|
||||
>
|
||||
{#snippet template(args)}
|
||||
<IconButton onclick={() => console.log('Default clicked')} {...args}>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story
|
||||
name="Disabled"
|
||||
args={{
|
||||
icon: chevronRightIcon,
|
||||
disabled: true,
|
||||
}}
|
||||
>
|
||||
{#snippet template(args)}
|
||||
<div class="flex flex-col gap-4 items-center">
|
||||
<IconButton disabled {...args}>
|
||||
{#snippet icon({ className })}
|
||||
<ChevronRight class={className} />
|
||||
{/snippet}
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!--
|
||||
Component: IconButton
|
||||
Shadcn button size="icon" variant="ghost" with custom styling and icon snippet
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { Button } from '$shared/shadcn/ui/button';
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import type {
|
||||
ComponentProps,
|
||||
Snippet,
|
||||
} from 'svelte';
|
||||
|
||||
interface Props extends ComponentProps<typeof Button> {
|
||||
/**
|
||||
* Direction of the rotation effect on click
|
||||
* @default clockwise
|
||||
*/
|
||||
rotation?: 'clockwise' | 'counterclockwise';
|
||||
/**
|
||||
* Icon
|
||||
*/
|
||||
icon: Snippet<[{ className: string }]>;
|
||||
}
|
||||
|
||||
let { rotation = 'clockwise', icon, ...rest }: Props = $props();
|
||||
</script>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
class="
|
||||
group relative border-none size-9
|
||||
bg-background-20 hover:bg-background-60
|
||||
backdrop-blur-3xl
|
||||
transition-all duration-200 ease-out
|
||||
will-change-transform
|
||||
hover:-translate-y-0.5
|
||||
active:translate-y-0 active:scale-95 active:shadow-none
|
||||
cursor-pointer
|
||||
disabled:opacity-50 disabled:pointer-events-none
|
||||
"
|
||||
size="icon"
|
||||
{...rest}
|
||||
>
|
||||
{@render icon?.({
|
||||
className: cn(
|
||||
'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-2 group-active:scale-90 group-disabled:stroke-transparent',
|
||||
rotation === 'clockwise'
|
||||
? 'group-active:rotate-6'
|
||||
: 'group-active:-rotate-6',
|
||||
),
|
||||
})}
|
||||
</Button>
|
||||
Reference in New Issue
Block a user