feat: add UI components including Skeleton, Slider, Toaster, Switch, Table, Tabs, Textarea, Toggle Group, Toggle, Tooltip, and User Avatar
- Implemented Skeleton component for loading states. - Added Slider component using Radix UI for customizable sliders. - Created Toaster component for notifications with theme support. - Developed Switch component for toggle functionality. - Introduced Table component with subcomponents for structured data display. - Built Tabs component for tabbed navigation. - Added Textarea component for multi-line text input. - Implemented Toggle Group and Toggle components for grouped toggle buttons. - Created Tooltip component for displaying additional information on hover. - Added User Avatar component for displaying user images with fallback. - Implemented useIsMobile hook for responsive design. - Created API utility functions for user and thought data fetching. - Added utility function for class name merging. - Updated package.json with new dependencies for UI components and utilities. - Added TypeScript configuration for path aliasing.
This commit is contained in:
@@ -1,26 +1,122 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, FormEvent } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card";
|
||||
import { Alert } from "@/components/ui/alert";
|
||||
|
||||
interface Thought {
|
||||
id: number;
|
||||
@@ -10,16 +14,11 @@ interface Thought {
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
// State to store the list of thoughts for the feed
|
||||
const [thoughts, setThoughts] = useState<Thought[]>([]);
|
||||
// State for the content of the new thought being typed
|
||||
const [newThoughtContent, setNewThoughtContent] = useState("");
|
||||
// State to manage loading status
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
// State to hold any potential errors during API calls
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Function to fetch the feed from the backend API
|
||||
const fetchFeed = async () => {
|
||||
try {
|
||||
setError(null);
|
||||
@@ -28,7 +27,6 @@ export default function Home() {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
// The API returns { thoughts: [...] }, so we access the nested array
|
||||
setThoughts(data.thoughts || []);
|
||||
} catch (e: unknown) {
|
||||
console.error("Failed to fetch feed:", e);
|
||||
@@ -40,15 +38,13 @@ export default function Home() {
|
||||
}
|
||||
};
|
||||
|
||||
// useEffect hook to fetch the feed when the component first loads
|
||||
useEffect(() => {
|
||||
fetchFeed();
|
||||
}, []);
|
||||
|
||||
// Handler for submitting the new thought form
|
||||
const handleSubmitThought = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newThoughtContent.trim()) return; // Prevent empty posts
|
||||
if (!newThoughtContent.trim()) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("http://localhost:8000/thoughts", {
|
||||
@@ -56,7 +52,6 @@ export default function Home() {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
// We are hardcoding author_id: 1 as we don't have auth yet
|
||||
body: JSON.stringify({ content: newThoughtContent, author_id: 1 }),
|
||||
});
|
||||
|
||||
@@ -64,9 +59,7 @@ export default function Home() {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
// Clear the input box
|
||||
setNewThoughtContent("");
|
||||
// Refresh the feed to show the new post
|
||||
fetchFeed();
|
||||
} catch (e: unknown) {
|
||||
console.error("Failed to post thought:", e);
|
||||
@@ -91,12 +84,14 @@ export default function Home() {
|
||||
</header>
|
||||
|
||||
{/* New Thought Form */}
|
||||
<div className="bg-white/70 backdrop-blur-lg rounded-xl shadow-lg p-5 mb-8">
|
||||
<Card className="bg-white/70 backdrop-blur-lg rounded-xl shadow-lg p-5 mb-8">
|
||||
<form onSubmit={handleSubmitThought}>
|
||||
<textarea
|
||||
<Textarea
|
||||
value={newThoughtContent}
|
||||
onChange={(e) => setNewThoughtContent(e.target.value)}
|
||||
className="w-full h-24 p-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-sky-400 focus:outline-none resize-none transition-shadow"
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
|
||||
setNewThoughtContent(e.target.value)
|
||||
}
|
||||
className="resize-none"
|
||||
placeholder="What's on your mind?"
|
||||
maxLength={128}
|
||||
/>
|
||||
@@ -104,25 +99,25 @@ export default function Home() {
|
||||
<span className="text-sm text-gray-500">
|
||||
{128 - newThoughtContent.length} characters remaining
|
||||
</span>
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
className="px-6 py-2 bg-sky-500 text-white font-semibold rounded-full shadow-md hover:bg-sky-600 active:scale-95 transition-all duration-150 ease-in-out disabled:bg-gray-400"
|
||||
variant="default"
|
||||
disabled={!newThoughtContent.trim()}
|
||||
>
|
||||
Post
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Feed Section */}
|
||||
<main>
|
||||
{isLoading ? (
|
||||
<p className="text-center text-gray-600">Loading feed...</p>
|
||||
) : error ? (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg text-center">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
<Alert variant="destructive" className="text-center">
|
||||
{error}
|
||||
</Alert>
|
||||
) : thoughts.length === 0 ? (
|
||||
<p className="text-center text-gray-600">
|
||||
The feed is empty. Follow some users to see their thoughts!
|
||||
@@ -130,13 +125,12 @@ export default function Home() {
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{thoughts.map((thought) => (
|
||||
<div
|
||||
<Card
|
||||
key={thought.id}
|
||||
className="bg-white/80 backdrop-blur-lg rounded-xl shadow-lg p-4 transition-transform hover:scale-[1.02]"
|
||||
>
|
||||
<div className="flex items-center mb-2">
|
||||
<CardHeader className="flex items-center mb-2">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-green-300 to-sky-400 flex items-center justify-center font-bold text-white mr-3">
|
||||
{/* Placeholder for avatar */}
|
||||
{thought.author_id}
|
||||
</div>
|
||||
<div>
|
||||
@@ -145,9 +139,13 @@ export default function Home() {
|
||||
{new Date(thought.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-800 break-words">{thought.content}</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-gray-800 break-words">
|
||||
{thought.content}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
30
thoughts-frontend/app/users/[username]/loading.tsx
Normal file
30
thoughts-frontend/app/users/[username]/loading.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
// app/users/[username]/loading.tsx
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
// This is the ProfileSkeleton component from the previous step.
|
||||
// Next.js will automatically render this while page.tsx is loading.
|
||||
export default function ProfileLoading() {
|
||||
return (
|
||||
<div>
|
||||
<Skeleton className="h-48 w-full" />
|
||||
<main className="container mx-auto max-w-3xl p-4 -mt-16">
|
||||
<Card className="p-6">
|
||||
<div className="flex items-end gap-4">
|
||||
<Skeleton className="h-24 w-24 rounded-full" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-8 w-40" />
|
||||
<Skeleton className="h-4 w-24" />
|
||||
</div>
|
||||
</div>
|
||||
<Skeleton className="h-6 w-full mt-4" />
|
||||
<Skeleton className="h-6 w-3/4 mt-2" />
|
||||
</Card>
|
||||
<div className="mt-8 space-y-4">
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-32 w-full" />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
86
thoughts-frontend/app/users/[username]/page.tsx
Normal file
86
thoughts-frontend/app/users/[username]/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import { getUserProfile, getUserThoughts } from "@/lib/api";
|
||||
import { UserAvatar } from "@/components/user-avatar";
|
||||
import { ThoughtCard } from "@/components/thought-card";
|
||||
import { Calendar } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
interface ProfilePageProps {
|
||||
params: { username: string };
|
||||
}
|
||||
|
||||
export default async function ProfilePage({ params }: ProfilePageProps) {
|
||||
const { username } = params;
|
||||
|
||||
// Fetch data directly on the server.
|
||||
// The `loading.tsx` file will be shown to the user during this fetch.
|
||||
const [userResult, thoughtsResult] = await Promise.allSettled([
|
||||
getUserProfile(username),
|
||||
getUserThoughts(username),
|
||||
]);
|
||||
|
||||
// Handle errors from the server-side fetch
|
||||
if (userResult.status === "rejected") {
|
||||
// If the user isn't found, render the Next.js 404 page
|
||||
notFound();
|
||||
}
|
||||
|
||||
const user = userResult.value;
|
||||
const thoughts =
|
||||
thoughtsResult.status === "fulfilled" ? thoughtsResult.value.thoughts : [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Custom CSS Injection */}
|
||||
{user.customCss && (
|
||||
<style dangerouslySetInnerHTML={{ __html: user.customCss }} />
|
||||
)}
|
||||
|
||||
{/* Header Image */}
|
||||
<div
|
||||
className="h-48 bg-gray-200 bg-cover bg-center"
|
||||
style={{
|
||||
backgroundImage: user.headerUrl ? `url(${user.headerUrl})` : "none",
|
||||
}}
|
||||
/>
|
||||
|
||||
<main className="container mx-auto max-w-3xl p-4 -mt-16">
|
||||
{/* Profile Info */}
|
||||
<Card className="p-6 bg-card/80 backdrop-blur-lg">
|
||||
<div className="flex items-end gap-4">
|
||||
<div className="w-24 h-24 rounded-full border-4 border-background">
|
||||
<UserAvatar src={user.avatarUrl} alt={user.displayName} />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">
|
||||
{user.displayName || user.username}
|
||||
</h1>
|
||||
<p className="text-sm text-muted-foreground">@{user.username}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-4 whitespace-pre-wrap">{user.bio}</p>
|
||||
<div className="flex items-center gap-2 mt-4 text-sm text-muted-foreground">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>Joined {new Date(user.joinedAt).toLocaleDateString()}</span>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Thoughts Feed */}
|
||||
<div className="mt-8 space-y-4">
|
||||
{thoughts.map((thought) => (
|
||||
<ThoughtCard
|
||||
key={thought.id}
|
||||
thought={thought}
|
||||
author={{ username: user.username, avatarUrl: user.avatarUrl }}
|
||||
/>
|
||||
))}
|
||||
{thoughts.length === 0 && (
|
||||
<p className="text-center text-muted-foreground">
|
||||
This user hasn't posted any thoughts yet.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user