Project Refactoring

src/lib/components/Modal/Modal.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { fade } from 'svelte/transition';
+
+	export let visible = false;
+	export let close: () => void;
+</script>
+
+{#if visible}
+	<div
+		class={classNames('fixed inset-0 bg-[#00000088] justify-center items-center z-20', {
+			hidden: !visible,
+			'flex overflow-hidden': visible
+		})}
+		on:click|self={close}
+		transition:fade={{ duration: 100 }}
+	>
+		<slot />
+	</div>
+{/if}

src/lib/components/Modal/ModalContent.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+<div
+	class="max-w-3xl self-start mt-[10vh] bg-[#33333388] backdrop-blur-xl rounded overflow-hidden flex flex-col flex-1 mx-4 sm:mx-16 lg:mx-24 drop-shadow-xl"
+	in:fly={{ y: 20, duration: 200 }}
+>
+	<slot />
+</div>

src/lib/components/Modal/ModalHeader.svelte

@@ -0,0 +1,17 @@
+<script>
+	import IconButton from '../IconButton.svelte';
+	import { Cross2 } from 'radix-icons-svelte';
+
+	export let text;
+	export let close;
+</script>
+
+<div class="flex text-zinc-200 items-center p-3 px-5 gap-4 border-b border-zinc-700">
+	<slot />
+	{#if text}
+		<p class="font flex-1">{text}</p>
+	{/if}
+	<IconButton on:click={close}>
+		<Cross2 size="20" />
+	</IconButton>
+</div>