75 lines
No EOL
1.8 KiB
Svelte
75 lines
No EOL
1.8 KiB
Svelte
<script lang="ts" module>
|
|
export type AvatarShape = 'circle' | 'square';
|
|
export type AvatarPresence = 'offline' | 'online';
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import type { DaisyColor, DaisySize } from '$lib/types';
|
|
import clsx from 'clsx';
|
|
import type { SvelteHTMLElements } from 'svelte/elements';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
type Props = {
|
|
img?: string;
|
|
placeholder: string;
|
|
presence?: AvatarPresence;
|
|
ring?: DaisyColor;
|
|
shape?: AvatarShape;
|
|
size?: DaisySize;
|
|
} & Omit<SvelteHTMLElements['div'], 'children'>;
|
|
|
|
let {
|
|
class: className,
|
|
img,
|
|
placeholder,
|
|
presence,
|
|
ring,
|
|
shape = 'circle',
|
|
size = 'md',
|
|
...props
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
{...props}
|
|
class={twMerge('avatar', clsx(className))}
|
|
class:avatar-online={presence === 'online'}
|
|
class:avatar-offline={presence === 'offline'}
|
|
class:avatar-placeholder={placeholder}
|
|
>
|
|
<div
|
|
class={twMerge(
|
|
'rounded-xl',
|
|
clsx({
|
|
'rounded-xl': shape === 'square',
|
|
'rounded-full': shape === 'circle',
|
|
'w-12': size === 'xs',
|
|
'w-16': size === 'sm',
|
|
'w-20': size === 'md',
|
|
'w-24': size === 'lg',
|
|
'w-32': size === 'xl',
|
|
'avatar-ring ring-offset-base-100 ring ring-offset-2': !!ring,
|
|
})
|
|
)}
|
|
class:bg-neutral={placeholder}
|
|
class:ring-neutral={ring === 'neutral'}
|
|
class:ring-primary={ring === 'primary'}
|
|
class:ring-secondary={ring === 'secondary'}
|
|
class:ring-accent={ring === 'accent'}
|
|
class:ring-info={ring === 'info'}
|
|
class:ring-success={ring === 'success'}
|
|
class:ring-warning={ring === 'warning'}
|
|
class:ring-error={ring === 'error'}
|
|
>
|
|
{#if img}
|
|
<img src={img} alt={placeholder} />
|
|
{:else}
|
|
<span
|
|
class:text-5xl={size === 'xl'}
|
|
class:text-3xl={size === 'lg'}
|
|
class:text-2xl={size === 'md'}
|
|
class:text-xs={size === 'xs'}>{placeholder}</span
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div> |