114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
import Link from "next/link";
|
|
|
|
import { PixelAvatar } from "@/components/avatar/pixel-avatar";
|
|
import { AppShell } from "@/components/layout/app-shell";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Label } from "@/components/ui/label";
|
|
import { routes } from "@/lib/routes";
|
|
|
|
const placeholderHabits = [
|
|
{ id: "water", label: "Drink water", streak: 3 },
|
|
{ id: "walk", label: "Take a walk", streak: 5 },
|
|
{ id: "sleep", label: "Sleep 7+ hours", streak: 2 },
|
|
];
|
|
|
|
export default function AvatarPage() {
|
|
return (
|
|
<AppShell
|
|
title="Your Habit Pet"
|
|
description="Check in daily to keep your pet happy and build streaks."
|
|
>
|
|
<div className="flex flex-col gap-6">
|
|
<Card>
|
|
<CardContent className="flex flex-col items-center gap-4 pt-6">
|
|
<PixelAvatar mood="happy" />
|
|
<p className="text-center text-sm text-muted-foreground">
|
|
Your pet reacts to habits, wellness check-ins, and journal entries.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Today's habits</CardTitle>
|
|
<CardDescription>
|
|
Custom checkmarks and streak tracking live here.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{placeholderHabits.map((habit) => (
|
|
<div
|
|
key={habit.id}
|
|
className="flex items-center justify-between rounded-lg border p-3"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<Checkbox id={habit.id} />
|
|
<Label htmlFor={habit.id}>{habit.label}</Label>
|
|
</div>
|
|
<Badge variant="secondary">{habit.streak} day streak</Badge>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Wellness check-in</CardTitle>
|
|
<CardDescription>Rate how you feel today.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-5">
|
|
{[
|
|
{ id: "energy", label: "Energy" },
|
|
{ id: "mood", label: "Mood" },
|
|
{ id: "stress", label: "Stress" },
|
|
].map((metric) => (
|
|
<div key={metric.id} className="space-y-2">
|
|
<div className="flex items-center justify-between text-sm">
|
|
<Label htmlFor={metric.id}>{metric.label}</Label>
|
|
<span className="text-muted-foreground">5/10</span>
|
|
</div>
|
|
<input
|
|
id={metric.id}
|
|
type="range"
|
|
min={1}
|
|
max={10}
|
|
defaultValue={5}
|
|
className="w-full accent-primary"
|
|
/>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Daily journal</CardTitle>
|
|
<CardDescription>
|
|
One entry per day to reflect and help your pet grow.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<textarea
|
|
className="min-h-28 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
placeholder="How did today go?"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Button asChild className="w-full">
|
|
<Link href={routes.dailyQuiz}>Take today's quiz</Link>
|
|
</Button>
|
|
</div>
|
|
</AppShell>
|
|
);
|
|
}
|