mirror of
https://github.com/immich-app/immich.git
synced 2025-05-24 01:12:58 -04:00
98 lines
2.9 KiB
Svelte
98 lines
2.9 KiB
Svelte
<script lang="ts" context="module">
|
|
import type { HTMLButtonAttributes, HTMLLinkAttributes } from 'svelte/elements';
|
|
|
|
export type Color = 'transparent' | 'light' | 'dark' | 'gray' | 'primary' | 'opaque';
|
|
export type Padding = '1' | '2' | '3';
|
|
|
|
type BaseProps = {
|
|
icon: string;
|
|
title: string;
|
|
class?: string;
|
|
color?: Color;
|
|
padding?: Padding;
|
|
size?: string;
|
|
hideMobile?: true;
|
|
buttonSize?: string;
|
|
viewBox?: string;
|
|
};
|
|
|
|
export type ButtonProps = HTMLButtonAttributes &
|
|
BaseProps & {
|
|
href?: never;
|
|
};
|
|
|
|
export type LinkProps = HTMLLinkAttributes &
|
|
BaseProps & {
|
|
type?: never;
|
|
};
|
|
|
|
export type Props = ButtonProps | LinkProps;
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
|
|
type $$Props = Props;
|
|
|
|
export let type: $$Props['type'] = 'button';
|
|
export let href: $$Props['href'] = undefined;
|
|
export let icon: string;
|
|
export let color: Color = 'transparent';
|
|
export let title: string;
|
|
/**
|
|
* The padding of the button, used by the `p-{padding}` Tailwind CSS class.
|
|
*/
|
|
export let padding: Padding = '3';
|
|
/**
|
|
* Size of the button, used for a CSS value.
|
|
*/
|
|
export let size = '24';
|
|
export let hideMobile = false;
|
|
export let buttonSize: string | undefined = undefined;
|
|
/**
|
|
* viewBox attribute for the SVG icon.
|
|
*/
|
|
export let viewBox: string | undefined = undefined;
|
|
|
|
/**
|
|
* Override the default styling of the button for specific use cases, such as the icon color.
|
|
*/
|
|
let className = '';
|
|
export { className as class };
|
|
|
|
const colorClasses: Record<Color, string> = {
|
|
transparent: 'bg-transparent hover:bg-[#d3d3d3] dark:text-immich-dark-fg',
|
|
opaque: 'bg-transparent hover:bg-immich-bg/30 text-white hover:dark:text-white',
|
|
light: 'bg-white hover:bg-[#d3d3d3]',
|
|
dark: 'bg-[#202123] hover:bg-[#d3d3d3]',
|
|
gray: 'bg-[#d3d3d3] hover:bg-[#e2e7e9] text-immich-dark-gray hover:text-black',
|
|
primary:
|
|
'bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 hover:dark:bg-immich-dark-primary/80 text-white dark:text-immich-dark-gray',
|
|
};
|
|
|
|
const paddingClasses: Record<Padding, string> = {
|
|
'1': 'p-1',
|
|
'2': 'p-2',
|
|
'3': 'p-3',
|
|
};
|
|
|
|
$: colorClass = colorClasses[color];
|
|
$: mobileClass = hideMobile ? 'hidden sm:flex' : '';
|
|
$: paddingClass = paddingClasses[padding];
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<svelte:element
|
|
this={href ? 'a' : 'button'}
|
|
type={href ? undefined : type}
|
|
{title}
|
|
{href}
|
|
style:width={buttonSize ? buttonSize + 'px' : ''}
|
|
style:height={buttonSize ? buttonSize + 'px' : ''}
|
|
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
|
|
on:click
|
|
{...$$restProps}
|
|
>
|
|
<Icon path={icon} {size} ariaLabel={title} {viewBox} color="currentColor" />
|
|
</svelte:element>
|