Start of an uploader component for tailwind

src/app.css

@@ -1,3 +1,8 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+html,
+body {
+	height: 100%;
+}

src/lib/components/visual/Uploader.svelte

@@ -1,4 +1,19 @@
 <script lang="ts">
+	import { Upload } from "lucide-svelte";
+
+	interface Props {
+		files: FileList | undefined;
+	}
+
+	let { files = $bindable() }: Props = $props();
 </script>
 
-<input type="file" />
+<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"
+	>
+		<Upload />
+	</div>
+</div>
+
+<input type="file" class="hidden" bind:files />

src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Uploader from "$lib/components/visual/Uploader.svelte";
 	import { converters } from "$lib/converters/index.svelte";
 
 	let files = $state<FileList>();
@@ -8,4 +9,4 @@
 	});
 </script>
 
-<input type="file" bind:files />
+<Uploader bind:files />

tailwind.config.ts

@@ -1,11 +1,11 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from "tailwindcss";
 
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
 
 	theme: {
-		extend: {}
+		extend: {},
 	},
 
-	plugins: []
+	plugins: [],
 } satisfies Config;