<template>
<div
:class="
clsx(
'component tile',
'cursor-pointer border rounded overflow-hidden h-[233px] flex flex-col',
themeClasses(
'bg-shade-0 border-neutral-400',
'bg-neutral-900 border-neutral-600',
),
)
"
>
<div
:class="
clsx(
'skeleton-shimmer flex-none h-16 border-b',
themeClasses(
'bg-neutral-100 border-neutral-300',
'bg-neutral-800 border-neutral-600',
),
)
"
></div>
<div
:class="
clsx(
'skeleton-shimmer flex-1 border-b',
themeClasses(
'bg-neutral-50 border-neutral-300',
'bg-neutral-850 border-neutral-600',
),
)
"
></div>
<div
:class="
clsx(
'skeleton-shimmer flex-none h-12',
themeClasses('bg-neutral-100', 'bg-neutral-800'),
)
"
></div>
</div>
</template>
<script lang="ts" setup>
import clsx from "clsx";
import { themeClasses } from "@si/vue-lib/design-system";
</script>
