คอมโพเนนต์ทั้งหมด

Course card

การ์ดคอร์สเรียน ปก ระดับ จำนวนบทเรียน และราคา

ui/display.tsxServer safeลายเซ็นของ Lurnelle

การ์ดคอร์ส

ลายเซ็นของ Lurnelle ปกเป็นรูปจริงหรือตัวอักษรบนสีพาสเทล ราคาแสดงเฉพาะเมื่อมีราคาจริง

ใหม่Lingua Rush ฝึกคำศัพท์แบบเกม18 บทเรียน2 ชม. 30 นาที฿490 AI สำหรับนักเรียน เริ่มจากศูนย์12 บทเรียน3 ชม. 40 นาทีราคาแจ้งภายหลัง

ฟรีVerboSwipe ปัดเรียนกริยา9 บทเรียน55 นาที

เรียนแล้ว

tsx

<CourseCard
  href="/courses/lingua-rush"
  image="/img/lingua-rush.png"
  title="Lingua Rush ฝึกคำศัพท์แบบเกม"
  badge={<Badge tone="accent" variant="solid">ใหม่</Badge>}
  lessons={18}
  duration="2 ชม. 30 นาที"
  price="฿490"
/>
<CourseCard glyph="AI" tint="2" title="AI สำหรับนักเรียน" lessons={12} price="ราคาแจ้งภายหลัง" />

Props

Prop	Type	Default	คำอธิบาย
`title`	`ReactNode`	`-`	ชื่อคอร์ส
`image / glyph`	`string / ReactNode`	`-`	ปกรูปภาพหรือปกตัวอักษร
`tint`	`"1" \| "2" \| "3" \| "4"`	`"1"`	สีปกเมื่อไม่มีรูป
`badge`	`ReactNode`	`-`	ระดับหรือสถานะบนปก
`lessons / duration`	`number / string`	`-`	ความยาว
`price / footer`	`ReactNode`	`-`	ราคาหรือความคืบหน้า
`href`	`string`	`-`	ลิงก์

ใช้เมื่อไร

ควรทำ

แสดงราคาเฉพาะที่ยืนยันแล้ว
ใช้รูปปกขนาด 4:3

ไม่ควรทำ

แต่งราคาเต็มขีดฆ่าที่ไม่เคยมีจริง
ใส่ป้ายบนปกเกินหนึ่งป้าย