Feat/modal component

src/lib/components/Modal/Modal.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import Button from '$lib/components/Button.svelte';
+	import { modalShow } from './store';
+	import { onMount, onDestroy } from 'svelte';
+	import { typography } from '../../../styles/tailwind/typography';
+	import { faX, faFile } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
+	let isModalOpen = false;
+
+	let unsubscribe: () => void;
+
+	onMount(() => {
+		unsubscribe = modalShow.subscribe((value) => {
+			isModalOpen = value;
+		});
+	});
+
+	onDestroy(() => {
+		if (unsubscribe) unsubscribe();
+	});
+
+	function closeModal() {
+		modalShow.set(false);
+	}
+
+	const mockData = [
+		{ id: 1, content: 'เอกสารที่เกี่ยวข้อง1.pdf' },
+		{ id: 2, content: 'เอกสารที่เกี่ยวข้อง2.pdf' },
+		{ id: 3, content: 'เอกสารที่เกี่ยวข้อง3.pdf' },
+		{ id: 4, content: 'เอกสารที่เกี่ยวข้อง4.pdf' },
+		{ id: 5, content: 'เอกสารที่เกี่ยวข้อง5.pdf' },
+		{ id: 6, content: 'เอกสารที่เกี่ยวข้อง6.pdf' },
+		{ id: 7, content: 'เอกสารที่เกี่ยวข้อง7.pdf' },
+		{ id: 8, content: 'เอกสารที่เกี่ยวข้อง8.pdf' },
+		{ id: 9, content: 'เอกสารที่เกี่ยวข้อง9.pdf' },
+		{ id: 10, content: 'เอกสารที่เกี่ยวข้อง10.pdf' }
+	];
+</script>
+
+{#if isModalOpen}
+	<div class="fixed inset-0 bg-black bg-opacity-50 flex flex-col items-center justify-center z-50">
+		<div
+			class="bg-white h-[500px] max-md:h-[600px] max-md:w-[400px] w-[800px] rounded p-[36px] flex flex-col"
+		>
+			<div class="flex justify-between items-center">
+				<div
+					class={`md:${typography({ variant: 'heading2' })} max-md:${typography({ variant: 'heading4' })}`}
+				>
+					เอกสารที่เกี่ยวข้อง
+				</div>
+				<button class="hover:scale-105 transition-all" on:click={closeModal}>
+					<Fa icon={faX} />
+				</button>
+			</div>
+			<div class="h-[2px] bg-sucu-pink-03 w-full mt-5"></div>
+			<div
+				class="max-h-[400px] overflow-y-auto
+ [&::-webkit-scrollbar]:w-2
+  [&::-webkit-scrollbar-track]:rounded-full
+  [&::-webkit-scrollbar-track]:bg-gray-100
+  [&::-webkit-scrollbar-thumb]:rounded-full
+  [&::-webkit-scrollbar-thumb]:bg-gray-300
+  dark:[&::-webkit-scrollbar-track]:bg-neutral-700
+  dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 mt-5"
+			>
+				{#each mockData as item}
+					<div class="mb-2">
+						<Button variant="default" size="default"
+							><div class="mr-3">
+								<Fa icon={faFile} />
+							</div>
+							{item.content}</Button
+						>
+					</div>
+				{/each}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.overflow-auto {
+		scrollbar-width: thin;
+	}
+
+	.overflow-auto::-webkit-scrollbar {
+		width: 12px;
+		border-radius: 10px;
+	}
+
+	.overflow-auto::-webkit-scrollbar-track {
+		background: #f1f1f1;
+		border-radius: 10px;
+	}
+
+	.overflow-auto::-webkit-scrollbar-thumb {
+		background-color: #888;
+		border-radius: 10px;
+		border: 3px solid #f1f1f1;
+	}
+
+	.overflow-auto::-webkit-scrollbar-button {
+		display: none;
+	}
+</style>

src/lib/components/Modal/store.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const modalShow = writable(false);

src/lib/components/Playground.svelte

@@ -2,6 +2,14 @@
 	import { typography } from '../../styles/tailwind/typography';
 	import Button from './Button.svelte';
 	import TabCapsuleItem from './TabCapsule.svelte';
+	import Modal from '$lib/components/Modal/Modal.svelte';
+	import { modalShow } from './Modal/store';
+
+	modalShow.set(false);
+
+	function showModal() {
+		modalShow.set(true);
+	}
 
 	const typographyVariants: Array<
 		| 'heading1'
@@ -141,6 +149,15 @@
 			<p class="mt-4">No Tab Selected</p>
 		{/if}
 	</section>
+
+	<section class="section w-fit">
+		<h2 class="font-bold text-2xl mb-4">Modal</h2>
+		<Button variant="default" size="default" on:click={() => showModal()}>Click For Modal</Button>
+
+		{#if modalShow}
+			<Modal />
+		{/if}
+	</section>
 </div>
 
 <style>