大海
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { EmptyState } from "@/components/ui/EmptyState";
|
|
|
|
const mockPhotos = Array.from({ length: 8 }, (_, i) => ({
|
|
id: `p${i}`,
|
|
color: ["#FEE2E2", "#FEF3C7", "#D1FAE5", "#DBEAFE", "#EDE9FE", "#FCE7F3", "#E0E7FF", "#FFEDD5"][i],
|
|
emoji: ["🐱", "🐶", "🐱", "🐶", "🐱", "🐱", "🐶", "🐱"][i],
|
|
date: new Date(2026, 5, i + 1).toISOString(),
|
|
}));
|
|
|
|
export default function AlbumPage() {
|
|
const [photos] = useState(mockPhotos);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-xl font-bold text-gray-800">成长相册</h1>
|
|
<p className="text-sm text-gray-500 mt-1">记录宠物的成长瞬间</p>
|
|
</div>
|
|
<Button variant="primary" size="sm">+ 上传照片</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-2">
|
|
{photos.map(photo => (
|
|
<div key={photo.id} className="aspect-square rounded-xl flex items-center justify-center text-4xl" style={{ backgroundColor: photo.color }}>
|
|
{photo.emoji}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<p className="text-center text-xs text-gray-400">下拉加载更多照片</p>
|
|
</div>
|
|
);
|
|
}
|