Add component and apply to import
This commit is contained in:
35
app/components/ui/file-upload/FileUploadGrid.vue
Normal file
35
app/components/ui/file-upload/FileUploadGrid.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user