freedakgmail
99 lines
4.2 KiB
TypeScript
99 lines
4.2 KiB
TypeScript
"use client"
|
||
|
||
import { MemberNameWithStatus } from "./member-name-with-status"
|
||
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
|
||
|
||
export function MemberNameWithStatusDemo() {
|
||
return (
|
||
<div className="space-y-6 p-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>成员状态显示方案</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
{/* 方案1: 左上角圆点 */}
|
||
<div>
|
||
<h3 className="text-sm font-semibold mb-3">方案1: 左上角圆点（推荐）</h3>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="top-left" />
|
||
<span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="top-left" />
|
||
<span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 方案2: 左侧圆点 */}
|
||
<div>
|
||
<h3 className="text-sm font-semibold mb-3">方案2: 左侧圆点</h3>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞雨欣" isDead={false} dotPosition="left" />
|
||
<span className="text-xs text-muted-foreground">在世 - 绿色圆点</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞文昌" isDead={true} dotPosition="left" />
|
||
<span className="text-xs text-muted-foreground">已故 - 灰色圆点 + 浅色文字</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 方案3: 仅文字颜色 */}
|
||
<div>
|
||
<h3 className="text-sm font-semibold mb-3">方案3: 仅文字颜色</h3>
|
||
<div className="space-y-2">
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞雨欣" isDead={false} showDot={false} />
|
||
<span className="text-xs text-muted-foreground">在世 - 正常颜色</span>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<MemberNameWithStatus name="虞文昌" isDead={true} showDot={false} />
|
||
<span className="text-xs text-muted-foreground">已故 - 浅色文字</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 实际应用示例 */}
|
||
<div>
|
||
<h3 className="text-sm font-semibold mb-3">实际应用示例</h3>
|
||
<div className="space-y-3">
|
||
<Card className="p-3">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
|
||
<span className="text-xs">12月</span>
|
||
<span className="font-bold">5</span>
|
||
</div>
|
||
<div>
|
||
<p className="font-medium">
|
||
<MemberNameWithStatus name="虞国英" isDead={false} /> 诞辰
|
||
</p>
|
||
<p className="text-xs text-muted-foreground">第 2 世 · 100 年</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
|
||
<Card className="p-3">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
|
||
<span className="text-xs">12月</span>
|
||
<span className="font-bold">8</span>
|
||
</div>
|
||
<div>
|
||
<p className="font-medium">
|
||
<MemberNameWithStatus name="林雅芳" isDead={true} /> 忌日
|
||
</p>
|
||
<p className="text-xs text-muted-foreground">第 2 世 · 33 年 · 已故</p>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
)
|
||
}
|