Merge branch 'v2' into commentCard

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 { Navbar } from '@repo/ui/organism/navbar'
 
   let counter = $state(0)
 
@@ -15,6 +16,9 @@
   }
 </script>
 
+<Navbar />
+<Navbar isLoggedIn name="Testname testname" />
+
 <h1>Web</h1>
 
 <Button onclick={onButtonClick}>Button</Button>
@@ -40,7 +44,20 @@
 <GenedChip type="SC" />
 
 <h1>Testtsetst</h1>
-<CourseCard recommended={true} class="mt-4" />
+<CourseCard
+  recommended={true}
+  class="mt-4"
+  course={{
+    code: '0123101',
+    name: 'PARAGRAPH WRITING',
+    credit: 3,
+    gened: ['HU'],
+    seat: 24,
+    maxseat: 305,
+    review: 14,
+    days: ['MO', 'TU', 'WE'],
+  }}
+/>
 
 <h1>RecommendedTag</h1>
 <RecommendedTag />

packages/ui/src/components/atom/collapsible/collapsible.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { Collapsible } from 'bits-ui'
+  import { ChevronDown } from 'lucide-svelte'
+  import { slide } from 'svelte/transition'
+
+  export let name = undefined
+</script>
+
+<Collapsible.Root class="relative">
+  <div class="flex flex-row md:gap-2">
+    <p class="text-primary text-button1 font-medium">{name}</p>
+    <Collapsible.Trigger>
+      <ChevronDown color="#4A70C6" class="hidden md:block" />
+    </Collapsible.Trigger>
+  </div>
+  <Collapsible.Content
+    class="absolute top-8 right-0 w-28 bg-surface-container border-b-neutral-400 rounded-md"
+    transition={slide}
+  >
+    <slot />
+  </Collapsible.Content>
+</Collapsible.Root>

packages/ui/src/components/atom/collapsible/index.ts

@@ -0,0 +1,7 @@
+import Root from './collapsible.svelte'
+
+export {
+  Root as Collapsible,
+  //
+  Root,
+}

packages/ui/src/components/molecule/course-card/course-card.stories.svelte

@@ -22,13 +22,52 @@
       },
       course: {
         control: false,
+        defaultValue: {
+          code: '0123101',
+          name: 'PARAGRAPH WRITING',
+          credit: 3,
+          gened: ['HU'],
+          seat: 24,
+          maxseat: 305,
+          review: 14,
+          days: ['MO', 'TU', 'WE'],
+        },
       },
     },
   })
 </script>
 
 <!--👇 Each story then reuses that template-->
 
-<Story name="Default" />
+<Story
+  name="Default"
+  args={{
+    course: {
+      code: '0123101',
+      name: 'PARAGRAPH WRITING',
+      credit: 3,
+      gened: ['HU'],
+      seat: 24,
+      maxseat: 305,
+      review: 14,
+      days: ['MO', 'TU', 'WE'],
+    },
+  }}
+/>
 
-<Story name="Recommended" args={{ recommended: true }} />
+<Story
+  name="Recommended"
+  args={{
+    course: {
+      code: '0123101',
+      name: 'PARAGRAPH WRITING',
+      credit: 3,
+      gened: ['HU'],
+      seat: 24,
+      maxseat: 305,
+      review: 14,
+      days: ['MO', 'TU', 'WE'],
+    },
+    recommended: true,
+  }}
+/>

packages/ui/src/components/molecule/course-card/course-card.svelte

@@ -7,36 +7,19 @@
   import { DayChip } from '../../atom/day-chip/index.js'
   import { GenedChip } from '../../atom/gened-chip/index.js'
   import { RecommendedTag } from '../../atom/recommended-tag/index.js'
+  import type { Course } from './index.js'
 
   interface Props {
     class?: string | undefined | null
-    course?: {
-      code: string
-      name: string
-      credit: number
-      gened: ('HU' | 'SC' | 'SO' | 'IN')[]
-      seat: number
-      maxseat: number
-      review: number
-      days: ('MO' | 'TU' | 'WE' | 'TH' | 'FR' | 'SA' | 'SU')[]
-    }
+    course?: Course
     selected?: boolean
     recommended?: boolean
     [key: string]: unknown
   }
 
   let {
     class: className = undefined,
-    course = {
-      code: '0123101',
-      name: 'PARAGRAPH WRITING',
-      credit: 3,
-      gened: ['HU'],
-      seat: 24,
-      maxseat: 305,
-      review: 14,
-      days: ['MO', 'TU', 'WE'],
-    },
+    course,
     selected = $bindable(false),
     recommended = false,
     ...rest
@@ -49,7 +32,7 @@
 
 <div
   class={cn(
-    'flex flex-col w-[334px] h-[170px] lg:w-[440px] lg:h-[200px] ring-2 ring-neutral-100 rounded-xl py-5 px-4 lg:p-6 justify-between relative',
+    'flex flex-col w-[334px] h-[164px] md:w-[440px] md:h-[194px] px-4 py-5 md:p-6 gap-3 ring-2 ring-neutral-100 rounded-xl relative',
     className,
   )}
   {...rest}
@@ -60,7 +43,9 @@
   <div class="flex flex-row justify-between items-center">
     <div class="flex flex-col">
       <div class="font-medium text-caption">{course.code}</div>
-      <div class="font-medium text-subtitle">{course.name}</div>
+      <div class="font-medium sm:text-body2 md:text-body1">
+        {course.name}
+      </div>
     </div>
     <div class="flex gap-1">
       {#each course.gened as gened}
@@ -72,11 +57,11 @@
     <div
       class="font-normal text-caption text-neutral-400 flex flex-row items-center"
     >
-      {course.credit} หน่วยกิต <Dot color="#EDEDF1" /> ที่นั่ง GenEd {course.seat}
-      /
-      {course.maxseat}
-      <Dot color="#EDEDF1" />
-      {course.review} รีวิว
+      <span>{course.credit} หน่วยกิต</span>
+      <Dot color="#EDEDF1" size="16" />
+      <span>ที่นั่ง GenEd {course.seat} / {course.maxseat}</span>
+      <Dot color="#EDEDF1" size="16" />
+      <span>{course.review} รีวิว</span>
     </div>
     <div class="flex gap-2">
       {#each course.days as day}
@@ -85,20 +70,29 @@
     </div>
   </div>
   <div class="flex flex-row justify-between items-center">
-    <Button variant="outlined" size="lg" color="neutral" class="w-36 lg:w-48"
-      >เลือกเซคชัน</Button
+    <Button
+      variant="outlined"
+      color="neutral"
+      class="w-36 h-7 md:w-48 md:h-9 text-caption md:text-body2"
     >
+      เลือกเซคชัน
+    </Button>
     {#if !selected}
       <Button
         variant="outlined"
         color="primary"
         onclick={onButtonClick}
-        class="w-36 lg:w-48"
+        class="w-36 h-7 md:w-48 md:h-9 text-caption md:text-body2"
+        size="sm"
       >
         เลือก <Plus size="16" strokeWidth="3" />
       </Button>
     {:else}
-      <Button color="primary" onclick={onButtonClick} class="w-36 lg:w-48">
+      <Button
+        color="primary"
+        onclick={onButtonClick}
+        class="w-36 h-7 md:w-48 md:h-9 text-caption md:text-body2"
+      >
         เลือก <Check size="16" strokeWidth="3" />
       </Button>
     {/if}

packages/ui/src/components/molecule/course-card/index.ts

@@ -1 +1,16 @@
 export { default as CourseCard } from './course-card.svelte'
+import type { Day } from '../day-chip'
+import type { Type } from '../gened-chip'
+
+type Course = {
+  code: string
+  name: string
+  credit: number
+  gened: Type[]
+  seat: number
+  maxseat: number
+  review: number
+  days: Day[]
+}
+
+export type { Course }

packages/ui/src/components/organism/navbar/index.ts

@@ -0,0 +1,7 @@
+import Root from './navbar.svelte'
+
+export {
+  //
+  Root as Navbar,
+  Root,
+}

packages/ui/src/components/organism/navbar/navbar.stories.svelte

@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+
+  import { Navbar } from './index.js'
+
+  const { Story } = defineMeta<typeof Navbar>({
+    title: 'Organism/Navbar',
+    component: Navbar,
+    tags: ['autodocs'],
+    argTypes: {
+      isLoggedIn: {
+        control: 'boolean',
+      },
+      name: {
+        control: 'text',
+      },
+    },
+  })
+</script>
+
+<Story
+  name="Desktop"
+  parameters={{ viewport: { defaultViewport: 'tablet' } }}
+/>
+
+<Story
+  name="Desktop & Logged In"
+  parameters={{ viewport: { defaultViewport: 'tablet' } }}
+  args={{ isLoggedIn: true, name: 'Testname testname' }}
+/>
+
+<Story
+  name="Mobile"
+  parameters={{ viewport: { defaultViewport: 'mobile2' } }}
+/>
+
+<Story
+  name="Mobile & Loggin In"
+  parameters={{ viewport: { defaultViewport: 'mobile2' } }}
+  args={{ isLoggedIn: true, name: 'Testname testname' }}
+/>