feat(ui): user dialog

apps/web/src/routes/+page.svelte

@@ -7,6 +7,7 @@
   import { Input } from '@repo/ui/atom/input'
   import { RecommendedTag } from '@repo/ui/atom/recommended-tag'
   import { CourseCard } from '@repo/ui/molecule/course-card'
+  import { UserDialog } from '@repo/ui/molecule/user-dialog'
   import { Navbar } from '@repo/ui/organism/navbar'
 
   let counter = $state(0)
@@ -71,4 +72,10 @@
   </Accordion.Item>
 </Accordion.Root>
 
+<UserDialog
+  imageUrl="https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg"
+  name="Testname Testname"
+  id="6XXXXXXXXX"
+/>
+
 <a href="/dbdemo">Click to go to DB Demo</a>

packages/ui/src/components/molecule/user-dialog/index.ts

@@ -0,0 +1,7 @@
+import Root from './user-dialog.svelte'
+
+export {
+  Root,
+  //
+  Root as UserDialog,
+}

packages/ui/src/components/molecule/user-dialog/user-dialog.stories.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+
+  import { UserDialog } from './index'
+
+  const { Story } = defineMeta<typeof UserDialog>({
+    title: 'Molecule/User Dialog',
+    component: UserDialog,
+    tags: ['autodocs'],
+    argTypes: {
+      imageUrl: {
+        control: 'text',
+      },
+      name: {
+        control: 'text',
+      },
+      id: {
+        control: 'text',
+      },
+    },
+  })
+</script>
+
+<Story
+  name="Example"
+  args={{
+    imageUrl:
+      'https://s3-alpha-sig.figma.com/img/9700/7ce5/9fb43f41dfa4552821c5c7bc837a7e84?Expires=1736121600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=UWp0COPKxbiGnZUbN7-EQF0v8PznPXZzvPZxc3mryo-Ht7j~6qUJDaq3uzCuh-z-baS3x6SeJ8omqtDT6ECz6P9KLdXGXtSex5x-2zgezbPQAGBym2aQEuZ4bfn9hCQ6SsImZaG30l5c9Xw1wQxAiuTdPfXP3uPIfZJXesdXB73tKGKNGPv93MDrVpE2ZSaA5hhkkFyhhbqgiRpNEuZ4GMqatcVzjcl5xyhgbRHR2o03eXbvHUsFgzCD-pTFnofOB6pYYzqsroWM3pmCu9NsDXLCDgRNdsGgSczwTwj6vLoWIMuvmEkTcVcHc-0JRGzo4XRpfrJ2X0jd-hTU41H0kQ__',
+    name: 'Wanrudee Kkk',
+    id: '6XXXXXXXXX',
+  }}
+/>

packages/ui/src/components/molecule/user-dialog/user-dialog.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { DoorOpen, Settings } from 'lucide-svelte'
+
+  interface Props {
+    imageUrl: string
+    name: string
+    id: string
+  }
+
+  let {
+    imageUrl = undefined,
+    name = undefined,
+    id = undefined,
+  }: Props = $props()
+
+  let shortenedName = `${name?.split(' ')[0]} ${name?.split(' ')[1]?.charAt(0)}.`
+
+  const items = [
+    {
+      icon: Settings,
+      name: 'ตั้งค่า',
+    },
+    {
+      icon: DoorOpen,
+      name: 'ออกจากระบบ',
+    },
+  ]
+</script>
+
+<div class="w-60 rounded-xl border-2 border-[#EDEDF1]">
+  <div class="flex flex-col justify-center items-center p-4 gap-4">
+    <img
+      src={imageUrl}
+      alt="Profile"
+      class="rounded-full w-[72px] h-20 object-cover"
+    />
+    <div class="flex flex-col gap-2 items-center">
+      <p class="text-on-surface text-h3 font-bold">{shortenedName}</p>
+      <p class="text-on-surface text-body2 font-medium">ID: {id}</p>
+    </div>
+  </div>
+  {#each items as { icon: Icon, name }}
+    <div class="flex flex-row p-4 gap-3 items-center border-t border-[#EDEDF1]">
+      <Icon size="16" color="#353745" strokeWidth="2.5" />
+      <p class="text-on-surface font-medium text-button2">{name}</p>
+    </div>
+  {/each}
+</div>