setting up test functionality
This commit is contained in:
masongga
@@ -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'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>
|
||||
<AvatarStatusCard />
|
||||
<HabitTracker />
|
||||
<DailyQuizLinkButton />
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
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";
|
||||
|
||||
const quizQuestion = {
|
||||
prompt: "What is one small win you can celebrate today?",
|
||||
options: [
|
||||
"I showed up for myself",
|
||||
"I rested when I needed to",
|
||||
"I reached out to someone",
|
||||
"I kept a promise to myself",
|
||||
],
|
||||
};
|
||||
|
||||
export default function DailyQuizPage() {
|
||||
return (
|
||||
<AppShell
|
||||
title="Daily quiz"
|
||||
description="One quiz per day. Come back tomorrow for a new prompt."
|
||||
>
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge>Today's prompt</Badge>
|
||||
<Badge variant="outline">Not completed</Badge>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">{quizQuestion.prompt}</CardTitle>
|
||||
<CardDescription>
|
||||
Pick the answer that fits best. You can only submit once per day.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{quizQuestion.options.map((option) => (
|
||||
<Button
|
||||
key={option}
|
||||
variant="outline"
|
||||
className="h-auto w-full justify-start whitespace-normal px-4 py-3 text-left"
|
||||
>
|
||||
{option}
|
||||
</Button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
@@ -8,7 +8,7 @@ export default function AppLayout({
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Suspense fallback={<div className="min-h-svh bg-background pb-24" />}>
|
||||
<Suspense fallback={<div className="min-h-svh bg-background" />}>
|
||||
<AppAuthGate>{children}</AppAuthGate>
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
@@ -1,70 +1,26 @@
|
||||
import { Suspense } from "react";
|
||||
|
||||
import { ProfilePreferencesForm } from "@/components/profile/profile-preferences-form";
|
||||
import { AppShell } from "@/components/layout/app-shell";
|
||||
import { LogoutButton } from "@/components/logout-button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { getSessionUser } from "@/lib/auth-helpers";
|
||||
|
||||
async function ProfileContent() {
|
||||
const user = await getSessionUser();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Account</CardTitle>
|
||||
<CardDescription>Your sign-in details and session.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" value={user?.email ?? ""} readOnly />
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-lg border px-3 py-2">
|
||||
<span className="text-sm">Onboarding</span>
|
||||
<Badge variant="secondary">Complete</Badge>
|
||||
</div>
|
||||
<LogoutButton />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Preferences</CardTitle>
|
||||
<CardDescription>
|
||||
Notification and reminder settings will live here.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
Daily reminder time
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full justify-start">
|
||||
Pet appearance
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
return <ProfilePreferencesForm email={user?.email} />;
|
||||
}
|
||||
|
||||
export default function ProfilePage() {
|
||||
return (
|
||||
<AppShell
|
||||
title="Profile"
|
||||
description="Manage your account and habit pet preferences."
|
||||
title="Profile & preferences"
|
||||
description="Edit account details and personalize your experience."
|
||||
>
|
||||
<Suspense fallback={<p className="text-sm text-muted-foreground">Loading profile...</p>}>
|
||||
<Suspense
|
||||
fallback={
|
||||
<p className="text-sm text-muted-foreground">Loading profile...</p>
|
||||
}
|
||||
>
|
||||
<ProfileContent />
|
||||
</Suspense>
|
||||
</AppShell>
|
||||
|
||||
Reference in New Issue
Block a user