RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setting up test functionality

Browse Source
This commit is contained in:
masongga
2026-05-23 16:47:42 -06:00
parent 2ad9e42f3f
commit 94dbd18946
27 changed files with 1451 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app/(app)/avatar/page.tsx
View File

@@ -1,112 +1,18 @@
import Link from "next/link";
import { PixelAvatar } from "@/components/avatar/pixel-avatar";
import { AvatarStatusCard } from "@/components/avatar/avatar-status-card";
import { DailyQuizLinkButton } from "@/components/daily-quiz/daily-quiz-link-button";
import { HabitTracker } from "@/components/habits/habit-tracker";
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."
description="Today's tasks are personalized from your preferences and daily quiz."
>
<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&apos;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&apos;s quiz</Link>
</Button>
<AvatarStatusCard />
<HabitTracker />
<DailyQuizLinkButton />
</div>
</AppShell>
);