UI ที่ v0 generate ตาม prompt — โครงสำหรับนำไปแก้ต่อใน VS Code
# 1. ติดตั้ง dependencies (ใช้ pnpm หรือ npm ก็ได้)
npm install # หรือ pnpm install
# 2. รัน dev server
npm run dev # เปิด http://localhost:3000
# 3. build (ตรวจว่าไม่มี error)
npm run buildทดสอบแล้วว่า npm install + npm run build ผ่าน (Next.js 16, ทุก route compile สำเร็จ)
| ส่วน | ใช้ |
|---|---|
| Framework | Next.js (App Router) + TypeScript |
| Styling | TailwindCSS + shadcn/ui |
| Icons | lucide-react |
| Drag & Drop | @dnd-kit (core / sortable / utilities) |
หมายเหตุ: นี่เป็น UI ต้นแบบจาก v0 (React/Next.js). โปรเจกต์จริงตั้งใจใช้ SvelteKit + Supabase — ใช้ไฟล์นี้เป็น reference ด้าน design/layout แล้ว port เป็น Svelte หรือจะพัฒนาต่อบน Next.js เลยก็ได้
app/
├─ page.tsx # หน้าคลังลิงก์ (Library)
├─ pages/[id]/page.tsx # หน้าจัดการ Landing แต่ละหน้า (detail + tabs)
├─ preview/page.tsx # หน้า Landing สาธารณะ (mobile preview)
├─ layout.tsx # root layout
└─ globals.css # global styles + theme tokens
components/
├─ library-page.tsx # คลังลิงก์
├─ landing-page-card.tsx # การ์ดแต่ละหน้า (QR + สถิติ + badge)
├─ page-detail.tsx # detail + sidebar + แท็บ
├─ layout-builder.tsx # drag-drop builder (@dnd-kit)
├─ published-landing-page.tsx# หน้า Landing จริง 3 ธีม
├─ compliance-badge.tsx # badge คะแนน compliance
├─ score-ring.tsx # วงกลม progress คะแนน
├─ stat-card.tsx # การ์ดสถิติ
├─ icons.tsx # ไอคอน LINE/Telegram
└─ ui/ # shadcn/ui components (57 ไฟล์)
lib/
├─ types.ts # TypeScript types (LandingPage, Block, BlockType ฯลฯ)
├─ mock-data.ts # ข้อมูลตัวอย่าง (ยังไม่ต่อ DB)
└─ utils.ts # cn() helper
hooks/ # use-mobile, use-toast
- หน้า Landing — spacing ปุ่ม: ปุ่ม Telegram โดน sticky bottom bar บังตรงกลางจอ ควรเพิ่ม padding-bottom ให้ container หรือลด z-index ทับซ้อน
- บล็อก Animation ยังเป็นกล่องเปล่า — prompt ระบุให้มี gradient mesh เคลื่อนไหว + shimmer ตามสีธีม (ดูตัวอย่างใน
landing-premium-themes.htmlจากโปรเจกต์เดิม) - theme switcher ขวาบน — มีตัวอักษร overflow โผล่เล็กน้อย ควรเช็ค width/overflow
- ยังไม่ต่อ Supabase — ตอนนี้ใช้
lib/mock-data.tsต้องเปลี่ยนเป็น query จาก Supabase (schema + Edge Functions อยู่ในโปรเจกต์lp-systemเดิม) - ตรวจ block types ครบ 18 ชนิดไหม — เทียบกับ
lib/types.tsว่ามี hero/subheading/text/benefits/stats/image/video/gallery/divider/cta/single/call/social/trust/review/logos/faq/countdown ครบ
โปรเจกต์ lp-system (SvelteKit + Supabase) มี:
- Schema 6 migrations + RLS
- Edge Functions: compliance-check, capi-event, track-visit
- Bot detection, CAPI hashing
ถ้าจะใช้ Next.js ตัวนี้แทน SvelteKit ก็ย้าย logic ฝั่ง client มาเรียก Supabase + Edge Functions เดิมได้เลย (API เหมือนกัน)