Feat/modal component

src/lib/components/Modal.svelte

@@ -0,0 +1,141 @@
+<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';
+
+ let x = false;
+
+ function handleStorageChange(event: StorageEvent) {
+ if (event.key === 'modalShow') {
+ x = event.newValue === 'true';
+ }
+ }
+
+ onMount(() => {
+ if (typeof window !== 'undefined') {
+ window.addEventListener('storage', handleStorageChange);
+ modalShow.subscribe((value) => {
+ x = value;
+ });
+ }
+ });
+
+ onDestroy(() => {
+ if (typeof window !== 'undefined') {
+ window.removeEventListener('storage', handleStorageChange);
+ }
+ });
+ 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 x}
+ <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()}>
+ <svg
+ width="28"
+ height="28"
+ viewBox="0 0 28 28"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M2 2L26 26M2 26L26 2L2 26Z"
+ stroke="black"
+ stroke-width="3"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </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">
+ <svg
+ width="16"
+ height="20"
+ viewBox="0 0 16 20"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M5 10H11M5 14H11M13 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H8.586C8.8512 1.00006 9.10551 1.10545 9.293 1.293L14.707 6.707C14.8946 6.89449 14.9999 7.1488 15 7.414V17C15 17.5304 14.7893 18.0391 14.4142 18.4142C14.0391 18.7893 13.5304 19 13 19Z"
+ stroke="white"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ </div>
+ {item.content}</Button
+ >
+ </div>
+ {/each}
+ </div>
+ </div>
+ <!-- <Button variant="default" size="default" on:click={() => closeModal()}>Close Modal</Button> -->
+ </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/store.js

@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+let storedModalShow = false;
+if (typeof window !== 'undefined') {
+ storedModalShow = localStorage.getItem('modalShow') === 'true';
+}
+
+export const modalShow = writable(storedModalShow);
+
+if (typeof window !== 'undefined') {
+ modalShow.subscribe((value) => {
+ localStorage.setItem('modalShow', value ? 'true' : 'false');
+ });
+}

src/routes/testModal/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+ import Button from '$lib/components/Button.svelte';
+ import Modal from '$lib/components/Modal.svelte';
+ import { modalShow } from '../../lib/components/store';
+
+ function showModal() {
+ modalShow.set(true);
+ console.log(localStorage.getItem('modalShow'));
+ }
+</script>
+
+<div class="absolute justify-center items-center w-[100vw] flex h-[100vh]">
+ <Button variant="default" size="default" on:click={() => showModal()}>Click For Modal</Button>
+
+ {#if modalShow}
+ <Modal />
+ {/if}
+</div>