Feat/UI/course card (#721)

* add course-card and recommended-tag

* format course card code

* add mobile course-card & stories

* add recommended-tag storybook

* format autofix

---------

Co-authored-by: Patthapol Kittikun <patthapol.k@gmail.com>
Co-authored-by: Nutthapat Pongtanyavichai <contact@leomotors.me>

Author: 3 people

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

@@ -1,9 +1,11 @@
 <script lang="ts">
   import { Button } from '@repo/ui/button'
   import { Chip } from '@repo/ui/chip'
+  import { CourseCard } from '@repo/ui/course-card'
   import { DayChip } from '@repo/ui/day-chip'
   import { GenedChip } from '@repo/ui/gened-chip'
   import { Input } from '@repo/ui/input'
+  import { RecommendedTag } from '@repo/ui/recommended-tag'
 
   let counter = 0
 
@@ -33,3 +35,9 @@
 >
 <DayChip day="SA" />
 <GenedChip type="SC" />
+
+<h1>Testtsetst</h1>
+<CourseCard recommended="{true}" class="mt-4" />
+
+<h1>RecommendedTag</h1>
+<RecommendedTag />

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

@@ -0,0 +1,42 @@
+<script context="module" lang="ts">
+  import type { Meta } from '@storybook/svelte'
+
+  import { CourseCard } from './index.js'
+
+  export const meta = {
+    title: 'Molecule/CourseCard',
+    component: CourseCard,
+    tags: ['autodocs'],
+    argTypes: {
+      selected: {
+        control: 'boolean',
+      },
+      recommended: {
+        control: 'boolean',
+      },
+      onButtonClick: {
+        action: 'onButtonClick',
+      },
+      class: {
+        control: false,
+      },
+      course: {
+        control: false,
+      },
+    },
+  } satisfies Meta<CourseCard>
+</script>
+
+<script lang="ts">
+  import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<!--👇 We create a “template” of how args map to rendering-->
+<Template let:args>
+  <CourseCard {...args} />
+</Template>
+
+<!--👇 Each story then reuses that template-->
+<Story name="Default" />
+
+<Story name="Recommended" args="{{ recommended: true }}" />

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import { Check, Dot, Plus } from 'lucide-svelte'
+
+  import { cn } from '../../utils'
+  import { Button } from '../button'
+  import { DayChip } from '../day-chip'
+  import { GenedChip } from '../gened-chip'
+  import { RecommendedTag } from '../recommended-tag'
+
+  let className: string | undefined | null = undefined
+  export { className as class }
+
+  export let 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')[]
+  } = {
+    code: '0123101',
+    name: 'PARAGRAPH WRITING',
+    credit: 3,
+    gened: ['HU'],
+    seat: 24,
+    maxseat: 305,
+    review: 14,
+    days: ['MO', 'TU', 'WE'],
+  }
+
+  export let selected: boolean = false
+  export let recommended: boolean = false
+
+  export const onButtonClick = () => {
+    selected = !selected
+  }
+</script>
+
+<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',
+    className,
+  )}"
+  {...$$restProps}
+>
+  {#if recommended}
+    <RecommendedTag class="absolute top-[-9.5px] left-0" />
+  {/if}
+  <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>
+    <div class="flex gap-1">
+      {#each course.gened as gened}
+        <GenedChip type="{gened}" />
+      {/each}
+    </div>
+  </div>
+  <div class="flex flex-col gap-2">
+    <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} รีวิว
+    </div>
+    <div class="flex gap-2">
+      {#each course.days as day}
+        <DayChip {day} />
+      {/each}
+    </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
+    >
+    {#if !selected}
+      <Button
+        variant="outlined"
+        color="primary"
+        on:click="{onButtonClick}"
+        class="w-36 lg:w-48"
+      >
+        เลือก <Plus size="16" strokeWidth="3" />
+      </Button>
+    {:else}
+      <Button color="primary" on:click="{onButtonClick}" class="w-36 lg:w-48">
+        เลือก <Check size="16" strokeWidth="3" />
+      </Button>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1 @@
+export { default as CourseCard } from './course-card.svelte'

packages/ui/src/components/recommended-tag/index.ts

@@ -0,0 +1 @@
+export { default as RecommendedTag } from './recommended-tag.svelte'

packages/ui/src/components/recommended-tag/recommended-tag.stories.svelte

@@ -0,0 +1,28 @@
+<script context="module" lang="ts">
+  import type { Meta } from '@storybook/svelte'
+
+  import { RecommendedTag } from './index.js'
+
+  export const meta = {
+    title: 'Atom/RecommendedTag',
+    component: RecommendedTag,
+    tags: ['autodocs'],
+    argTypes: {
+      class: {
+        control: false,
+      },
+    },
+  } satisfies Meta<RecommendedTag>
+</script>
+
+<script lang="ts">
+  import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<!--👇 We create a “template” of how args map to rendering-->
+<Template let:args>
+  <RecommendedTag {...args} />
+</Template>
+
+<!--👇 Each story then reuses that template-->
+<Story name="Default" />

packages/ui/src/components/recommended-tag/recommended-tag.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Sparkles } from 'lucide-svelte'
+
+  import { cn } from '../../utils'
+
+  let className: string | undefined | null = undefined
+
+  export { className as class }
+</script>
+
+<div
+  class="{cn(
+    'inline-flex items-center justify-center relative text-neutral-white bg-tangerine-500 py-[2px] px-6 rounded-tl-xl rounded-br-xl z-30',
+    className,
+  )}"
+  {...$$restProps}
+>
+  <Sparkles class="mr-2" size="16" />
+  แนะนำสำหรับคุณ
+  <div
+    class="absolute right-0 top-0 translate-x-full border-b-8 border-b-tangerine-700 border-r-8 border-r-neutral-white"
+  ></div>
+</div>