Some more work on the uploader

This commit is contained in:
Realmy 2024-11-11 16:44:34 +01:00
parent b97d444d98
commit 2cf510eafa
4 changed files with 29 additions and 10 deletions

View File

@ -2,7 +2,12 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
html,
body {
height: 100%;
:root {
--bg: hsl(0, 0%, 100%);
--fg: hsl(0, 0%, 10%);
--fg-muted: hsl(0, 0%, 40%);
}
body {
@apply text-foreground bg-background;
}

View File

@ -8,12 +8,12 @@
let { files = $bindable() }: Props = $props();
</script>
<div class="flex items-center justify-center h-full">
<div
class="flex items-center justify-center border-2 border-solid border-black w-full max-w-screen-lg h-80"
>
<div
class="flex items-center justify-center flex-col border-2 border-solid border-foreground rounded-xl w-full max-w-screen-lg h-80"
>
<Upload />
</div>
<h2>Drop or click to upload files</h2>
<p class="text-foregroundMuted">the</p>
</div>
<input type="file" class="hidden" bind:files />

View File

@ -4,4 +4,13 @@
let files = $state<FileList>();
</script>
<Uploader bind:files />
<div class="flex items-center justify-center h-full">
<Uploader bind:files />
</div>
<style>
/* for this page specifically */
:global(html, body) {
height: 100%;
}
</style>

View File

@ -5,6 +5,11 @@ export default {
theme: {
extend: {},
colors: {
background: "var(--bg)",
foreground: "var(--fg)",
foregroundMuted: "var(--fg-muted)",
},
},
plugins: [],