feat: close button (#19)

immich-app · Nov 18, 2024 · 188c1d8 · 188c1d8
1 parent ae011d3
commit 188c1d8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 4 deletions.
diff --git a/src/docs/constants.ts b/src/docs/constants.ts
@@ -20,8 +20,9 @@ type Route = { name: string; link: string };
 export const routes: Route[] = [
 	{ name: 'Alert', link: '/examples/alert' },
 	{ name: 'Button', link: '/examples/button' },
-	{ name: 'Checkbox', link: '/examples/checkbox' },
 	{ name: 'Card', link: '/examples/card' },
+	{ name: 'Checkbox', link: '/examples/checkbox' },
+	{ name: 'CloseButton', link: '/examples/close-button' },
 	{ name: 'Heading', link: '/examples/heading' },
 	{ name: 'IconButton', link: '/examples/icon-button' },
 	{ name: 'Logo', link: '/examples/logo' },

diff --git a/src/lib/components/CloseButton/CloseButton.svelte b/src/lib/components/CloseButton/CloseButton.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import IconButton from '$lib/components/IconButton/IconButton.svelte';
+	import type { CloseButtonProps } from '$lib/types.js';
+	import { mdiClose } from '@mdi/js';
+
+	const { size = 'medium', variant = 'ghost' }: CloseButtonProps = $props();
+</script>
+
+<IconButton icon={mdiClose} color="secondary" shape="round" {variant} {size} />
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -6,6 +6,7 @@ export { default as CardDescription } from '$lib/components/Card/CardDescription
 export { default as CardFooter } from '$lib/components/Card/CardFooter.svelte';
 export { default as CardHeader } from '$lib/components/Card/CardHeader.svelte';
 export { default as CardTitle } from '$lib/components/Card/CardTitle.svelte';
+export { default as CloseButton } from '$lib/components/CloseButton/CloseButton.svelte';
 export { default as Checkbox } from '$lib/components/Form/Checkbox.svelte';
 export { default as Input } from '$lib/components/Form/Input.svelte';
 export { default as Label } from '$lib/components/Form/Label.svelte';

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -12,12 +12,15 @@ type ButtonOrAnchor =
 	| ({ href?: never } & HTMLButtonAttributes)
 	| ({ href: string } & HTMLAnchorAttributes);
 
-type ButtonBaseProps = {
+export type CloseButtonProps = {
+	size?: Size;
+	variant?: Variants;
+};
+
+type ButtonBaseProps = CloseButtonProps & {
 	class?: string;
 	color?: Color;
-	size?: Size;
 	shape?: Shape;
-	variant?: Variants;
 } & ButtonOrAnchor;
 
 export type IconProps = {

diff --git a/src/routes/examples/close-button/+page.svelte b/src/routes/examples/close-button/+page.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import DualThemeLayout from '$docs/components/DualThemeLayout.svelte';
+	import { Card, CardBody, CardHeader, CardTitle, CloseButton, VStack } from '@immich/ui';
+</script>
+
+<DualThemeLayout name="CloseButton">
+	{#snippet component()}
+		<Card>
+			<CardHeader>
+				<CardTitle>Basic</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<CloseButton />
+				</VStack>
+			</CardBody>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Filled</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<CloseButton variant="filled" />
+				</VStack>
+			</CardBody>
+		</Card>
+
+		<Card>
+			<CardHeader>
+				<CardTitle>Outline</CardTitle>
+			</CardHeader>
+			<CardBody>
+				<VStack>
+					<CloseButton variant="outline" />
+				</VStack>
+			</CardBody>
+		</Card>
+	{/snippet}
+</DualThemeLayout>