Update app/booking/page.tsx
This commit is contained in:
parent
f763e51296
commit
69e2449b3e
|
|
@ -0,0 +1,152 @@
|
|||
"use client";
|
||||
import { Container } from "@/components/container";
|
||||
import { Heading } from "@/components/heading";
|
||||
import { Subheading } from "@/components/subheading";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Calendar as CalendarIcon, Clock, CreditCard, QrCode, Wallet } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function BookingPage() {
|
||||
const [step, setStep] = useState(1);
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-neutral-50 pt-32 pb-20">
|
||||
<Container className="max-w-4xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="md:col-span-2 space-y-6">
|
||||
<Heading>Booking Sesi Mentoring</Heading>
|
||||
|
||||
{/* Step 1: Schedule */}
|
||||
<Card className="border-none shadow-sm">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">1</div>
|
||||
<h3 className="text-xl font-bold">Pilih Jadwal & Durasi</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Label>Pilih Durasi</Label>
|
||||
<RadioGroup defaultValue="60" className="grid grid-cols-3 gap-4">
|
||||
{["30", "45", "60"].map((min) => (
|
||||
<div key={min}>
|
||||
<RadioGroupItem value={min} id={`m${min}`} className="peer sr-only" />
|
||||
<Label
|
||||
htmlFor={`m${min}`}
|
||||
className="flex flex-col items-center justify-center rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent peer-data-[state=checked]:border-indigo-600 cursor-pointer"
|
||||
>
|
||||
<span className="font-bold">{min} Menit</span>
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label>Pilih Tanggal (UI Only)</Label>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[15, 16, 17, 18].map((day) => (
|
||||
<div key={day} className={`p-3 text-center rounded-lg border-2 cursor-pointer ${day === 16 ? 'border-indigo-600 bg-indigo-50' : 'border-neutral-100'}`}>
|
||||
<div className="text-xs text-neutral-500">Okt</div>
|
||||
<div className="text-lg font-bold">{day}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label>Pilih Jam</Label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{["19:00", "20:00", "21:00"].map((time) => (
|
||||
<div key={time} className={`p-3 text-center rounded-lg border-2 cursor-pointer ${time === '19:00' ? 'border-indigo-600 bg-indigo-50' : 'border-neutral-100'}`}>
|
||||
<span className="font-medium">{time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Step 2: Payment */}
|
||||
<Card className="border-none shadow-sm">
|
||||
<CardContent className="p-8">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-8 h-8 rounded-full bg-neutral-200 text-neutral-600 flex items-center justify-center font-bold">2</div>
|
||||
<h3 className="text-xl font-bold">Metode Pembayaran</h3>
|
||||
</div>
|
||||
|
||||
<RadioGroup defaultValue="qris" className="space-y-3">
|
||||
<div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="qris" id="qris" />
|
||||
<Label htmlFor="qris" className="font-medium cursor-pointer">QRIS (Gopay, OVO, Dana)</Label>
|
||||
</div>
|
||||
<QrCode className="w-5 h-5 text-neutral-400" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="va" id="va" />
|
||||
<Label htmlFor="va" className="font-medium cursor-pointer">Virtual Account</Label>
|
||||
</div>
|
||||
<CreditCard className="w-5 h-5 text-neutral-400" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 border rounded-xl cursor-pointer hover:bg-neutral-50">
|
||||
<div className="flex items-center gap-3">
|
||||
<RadioGroupItem value="wallet" id="wallet" />
|
||||
<Label htmlFor="wallet" className="font-medium cursor-pointer">E-Wallet Langsung</Label>
|
||||
</div>
|
||||
<Wallet className="w-5 h-5 text-neutral-400" />
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<Card className="border-none shadow-lg sticky top-32">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-bold text-lg mb-6">Ringkasan Pesanan</h3>
|
||||
|
||||
<div className="flex gap-4 mb-6">
|
||||
<img src="https://i.pravatar.cc/100?u=budi" className="w-12 h-12 rounded-lg object-cover" />
|
||||
<div>
|
||||
<div className="font-bold">Budi Santoso</div>
|
||||
<div className="text-xs text-neutral-500">Senior Product Manager</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 text-sm mb-8">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-neutral-500">Jadwal</span>
|
||||
<span className="font-medium">16 Okt, 19:00</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-neutral-500">Durasi</span>
|
||||
<span className="font-medium">60 Menit</span>
|
||||
</div>
|
||||
<div className="pt-3 border-t flex justify-between text-base">
|
||||
<span className="text-neutral-500">Total Bayar</span>
|
||||
<span className="font-bold text-indigo-600">Rp 250.000</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button className="w-full h-12 bg-indigo-600 hover:bg-indigo-700" asChild>
|
||||
<Link href="/pre-session">Bayar & Konfirmasi</Link>
|
||||
</Button>
|
||||
|
||||
<p className="text-center text-[10px] text-neutral-400 mt-4">
|
||||
Dengan membayar, kamu menyetujui Syarat & Ketentuan Mentora.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue