60 lines
1.2 KiB
Svelte
60 lines
1.2 KiB
Svelte
|
<!--
|
||
|
|
@component
|
||
|
|
|
||
|
|
Metro-like tile. Must be in a group to display correctly.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { cva } from "class-variance-authority";
|
||
|
|
|
||
|
|
let {
|
||
|
|
size,
|
||
|
|
row,
|
||
|
|
column,
|
||
|
|
icon,
|
||
|
|
}: {
|
||
|
|
/**
|
||
|
|
* Size.
|
||
|
|
*/
|
||
|
|
size: "small" | "medium" | "wide" | "large";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Row index. Must be in a small tiles.
|
||
|
|
*/
|
||
|
|
row: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Column index. Must be in a small tiles.
|
||
|
|
*/
|
||
|
|
column: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Icon.
|
||
|
|
*/
|
||
|
|
icon: string;
|
||
|
|
} = $props();
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Tile style.
|
||
|
|
**/
|
||
|
|
const style = cva(["bg-(--tile-color)", "bg-center", "bg-no-repeat"], {
|
||
|
|
variants: {
|
||
|
|
size: {
|
||
|
|
small: "bg-size-[45px]",
|
||
|
|
medium: ["col-span-2", "row-span-2", "bg-size-[90px]"],
|
||
|
|
wide: ["col-span-4", "row-span-2", "bg-size-[90px]"],
|
||
|
|
large: ["col-span-4", "row-span-4", "bg-size-[180px]"],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class={style({ size })}
|
||
|
|
style="
|
||
|
|
background-image: url({icon});
|
||
|
|
grid-column-start: {column};
|
||
|
|
grid-row-start: {row};
|
||
|
|
"
|
||
|
|
></div>
|