36 lines
937 B
Vue
36 lines
937 B
Vue
<script lang="ts" setup>
|
|
import type { HTMLAttributes } from "vue";
|
|
|
|
interface FileUploadGridProps {
|
|
class?: HTMLAttributes["class"];
|
|
}
|
|
|
|
defineProps<FileUploadGridProps>();
|
|
|
|
const ROWS = 11;
|
|
const COLUMNS = 41;
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex shrink-0 scale-105 flex-wrap items-center justify-center gap-px bg-gray-100 dark:bg-neutral-900"
|
|
:class="[$props.class]"
|
|
>
|
|
<template v-for="row in ROWS">
|
|
<template
|
|
v-for="col in COLUMNS"
|
|
:key="`${row}-${col}`"
|
|
>
|
|
<div
|
|
class="flex h-10 w-10 flex-shrink-0 rounded-[2px]"
|
|
:class="[
|
|
((row - 1) * COLUMNS + (col - 1)) % 2 === 0
|
|
? 'bg-gray-50 dark:bg-neutral-950'
|
|
: 'bg-gray-50 shadow-[0px_0px_1px_3px_rgba(255,255,255,1)_inset] dark:bg-neutral-950 dark:shadow-[0px_0px_1px_3px_rgba(0,0,0,1)_inset]',
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|