Comment card

packages/ui/src/components/atom/rating-star/index.ts

@@ -0,0 +1 @@
+export { default as RatingStar } from './rating-star.svelte'

packages/ui/src/components/atom/rating-star/rating-star.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+  import { RatingStar } from './index.js'
+
+  const { Story } = defineMeta<typeof RatingStar>({
+    title: 'Atom/RatingStar',
+    component: RatingStar,
+    tags: ['autodocs'],
+    argTypes: {
+      rating: {
+        control: 'number',
+      },
+    },
+  })
+</script>
+
+<Story
+  name="Default"
+  args={{
+    rating: 3.5,
+  }}
+/>

packages/ui/src/components/atom/rating-star/rating-star.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { Star } from 'lucide-svelte'
+  let { rating } = $props()
+  // Calculate the number of filled and unfilled stars
+  const totalStars = 5
+  let filledStars = $derived(Math.floor(rating)) // Number of fully filled stars
+  let hasHalfStar = $derived(rating % 1 !== 0) // Determine if there's a half star
+  let emptyStars = $derived(totalStars - filledStars - (hasHalfStar ? 1 : 0))
+</script>
+
+<div class="flex flex-row text-h3 text-primary gap-1.5">
+  <!-- Render filled stars -->
+  {#each Array(filledStars) as _, i}
+    <Star fill="currentColor" />
+  {/each}
+
+  <!-- Optionally render a half star (if applicable) -->
+  {#if hasHalfStar}
+    <div class="flex gap-0">
+      <div class="relative inline-block w-6 h-6 overflow-hidden max-w-3">
+        <Star fill="currentColor" />
+      </div>
+      <div
+        class="relative inline-block w-6 h-6 overflow-hidden max-w-3 transform scale-x-[-1]"
+      >
+        <Star />
+      </div>
+    </div>
+  {/if}
+
+  <!-- Render unfilled stars -->
+  {#each Array(emptyStars) as _, __}
+    <Star />
+  {/each}
+</div>

packages/ui/src/components/molecule/comment/comment.stories.svelte

@@ -0,0 +1,45 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf'
+
+  import { Comment } from './index.js'
+
+  const { Story } = defineMeta<typeof Comment>({
+    title: 'Molecule/Comment',
+    component: Comment,
+    tags: ['autodocs'],
+    argTypes: {
+      content: {
+        control: 'text',
+      },
+      semester: {
+        control: 'text',
+      },
+      rating: {
+        control: 'number',
+      },
+      likesCount: {
+        control: 'number',
+      },
+      dislikesCount: {
+        control: 'number',
+      },
+    },
+  })
+</script>
+
+<Story
+  name="Default"
+  args={{
+    content: `ส่วนตัวคิดว่าค่อนข้างสบาย
+มีงานสัปดาห์ละครั้ง ปกติจะมีวิดีโอให้ดู ไม่ยาวมาก แต่จะไม่ดูก็ได้ เพราะปกติเราแค่อ่านตัวอย่างที่ให้มาแล้วก็ลองเขียนเลย งานส่วนใหญ่จะให้ 
+Topic กว้างๆมา ถ้าอาจารย์ประจำ sec ไม่ strict มาก ก็เขียนตามใจไปเลย แค่เอาเรื่องที่เรียนในสัปดาห์นั้นมาปรับๆนิดหน่อย 
+ปกติจะไม่อยากเสียเวลามาก ก็เขียนครั้งเดียวแล้วส่งไปเลย เลยเสียเวลาแค่ 1-2 ชม. ต่อสัปดาห์ แต่ถ้าใครจริงจังกับงานเขียนหน่อยก็อาจใช้เวลาเพิ่มขึ้น
+สอบเหมือนกับงานที่ทำ จะไม่อ่านไปสอบก็ได้ถ้าจำพวกงานที่ทำส่งได้ แต่ก่อนสอบมีคลิปรีวิวให้ดูก่อน พึ่งตัวนี้เอาก็ได้
+อันนี้ก็ขึ้นอยู่กับ sec ของเราอาจารย์ให้คะแนนงานค่อนข้างง่าย แต่จะให้คะแนนสอบยากหน่อย แต่เฉลี่ยๆรวมๆกันก็ได้ A
+เพราะเขียนตามใจตัวเองเป็นหลัก ไม่ค่อยยึดกับเรื่องที่เรียนมาเลยรู้สึกไม่ค่อยได้อะไรใหม่ ที่ช่วยน่าจะเป็นการจัดระเบียบความคิดและสรุปให้อยู่ในย่อหน้า`,
+    semester: `ภาคต้น 2565`,
+    rating: 3.5,
+    likesCount: 100,
+    dislikesCount: 0,
+  }}
+/>

packages/ui/src/components/molecule/comment/comment.svelte

@@ -0,0 +1,66 @@
+<script>
+  import { RatingStar } from '../../atom/rating-star'
+  import { ThumbsUp, ThumbsDown } from 'lucide-svelte'
+
+  let { content, semester, rating, likesCount, dislikesCount } = $props()
+  let hasHalfStar = $derived(rating % 1 !== 0) // Determine if there's a half star
+  let isExpanded = $state(false)
+</script>
+
+<div
+  class="h-[320px] w-full lg:h-auto border border-surface-container px-6 py-5 lg:py-10 lg:px-12 box-border rounded-xl flex flex-col gap-y-4
+  lg:gap-y-8 overflow-hidden"
+  class:h-auto={isExpanded}
+>
+  <div class="flex flex-row gap-x-6">
+    <div class="font-bold text-h3 text-primary">
+      {#if !hasHalfStar}
+        <span>{rating}.0</span>
+      {:else}
+        <span>{rating}</span>
+      {/if}
+    </div>
+
+    <RatingStar {rating} />
+
+    <div class="text-subtitle font-sans font-medium">
+      {semester}
+    </div>
+  </div>
+
+  <div
+    class="h-[200px] lg:h-auto relative overflow-hidden"
+    class:h-fit={isExpanded}
+    class:overflow-visible={isExpanded}
+  >
+    <p
+      class="w-full h-auto self-center text-body1 font-sarabun font-regular text-on-surface"
+    >
+      {content}
+    </p>
+
+    <!-- Button to toggle view -->
+    <button
+      class="absolute bottom-0 right-0 underline text-button1 text-primary lg:hidden pb-1 pt-1 pl-2 bg-surface
+"
+      onclick={() => (isExpanded = !isExpanded)}
+    >
+      {#if isExpanded}
+        ดูน้อยลง
+      {:else}
+        ดูเพ่ิมเติม
+      {/if}
+    </button>
+  </div>
+
+  <div class="gap-6 flex flex-row text-subtitle font-sans">
+    <div class="flex flex-row font-medium gap-x-2">
+      <ThumbsUp class="text-neutral-400" />
+      {likesCount}
+    </div>
+    <div class="flex flex-row font-medium gap-x-2">
+      <ThumbsDown class="text-neutral-400" />
+      {dislikesCount}
+    </div>
+  </div>
+</div>

packages/ui/src/components/molecule/comment/index.ts

@@ -0,0 +1 @@
+export { default as Comment } from './comment.svelte'