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/components";
@import "tailwindcss/utilities"; @import "tailwindcss/utilities";
html, :root {
body { --bg: hsl(0, 0%, 100%);
height: 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(); let { files = $bindable() }: Props = $props();
</script> </script>
<div class="flex items-center justify-center h-full"> <div
<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"
class="flex items-center justify-center border-2 border-solid border-black w-full max-w-screen-lg h-80" >
> <Upload />
<Upload /> <h2>Drop or click to upload files</h2>
</div> <p class="text-foregroundMuted">the</p>
</div> </div>
<input type="file" class="hidden" bind:files /> <input type="file" class="hidden" bind:files />

View File

@ -4,4 +4,13 @@
let files = $state<FileList>(); let files = $state<FileList>();
</script> </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: { theme: {
extend: {}, extend: {},
colors: {
background: "var(--bg)",
foreground: "var(--fg)",
foregroundMuted: "var(--fg-muted)",
},
}, },
plugins: [], plugins: [],