34 lines
759 B
Svelte
34 lines
759 B
Svelte
<script lang="ts">
|
|
import Heading from '../atoms/Heading.svelte';
|
|
|
|
type Props = {
|
|
title: string;
|
|
description?: string;
|
|
backgroundColor?: string;
|
|
onClick: () => void;
|
|
};
|
|
|
|
let { title, description, backgroundColor = '#333333', onClick }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
role="button"
|
|
tabindex="0"
|
|
class={`inline-block cursor-pointer rounded-2xl p-4 shadow-sm transition-all duration-200 ease-in-out hover:shadow-md md:p-6`}
|
|
style:background-color={backgroundColor}
|
|
onclick={onClick}
|
|
onkeydown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
onClick();
|
|
}
|
|
}}
|
|
>
|
|
<Heading size="small" spacing="none">
|
|
{title}
|
|
</Heading>
|
|
{#if description}
|
|
<p class="text-sm text-gray-600">{description}</p>
|
|
{/if}
|
|
</div>
|