nixcn/cms-server
1
0
Fork 1
Code Pull Requests Activity

feat(client): event card

Browse Source 
Signed-off-by: Noa Virellia <noa@requiem.garden>
This commit is contained in:
Noa Virellia
2026-02-01 09:54:19 +08:00
committed by Asai Neko
parent e5c12b4cfe
commit cee71097af
5 changed files with 74 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
client/cms/src/components/workbenchCards/event-card.tsx
View File

@@ -1,39 +0,0 @@
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardAction,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export function EventCard({ type, coverImage, eventName, description, startTime, endTime }:
{
type: 'official' | 'party',
coverImage: string, eventName: string, description: string, startTime: string, endTime: string
}) {
return (
<Card className="relative mx-auto w-full max-w-sm pt-0">
<div className="absolute inset-0 z-30 aspect-video bg-black/35" />
<img
src="https://avatar.vercel.sh/shadcn1"
alt="Event cover"
className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
/>
<CardHeader>
<CardAction>
<Badge variant="secondary">Featured</Badge>
</CardAction>
<CardTitle>Design systems meetup</CardTitle>
<CardDescription>
A practical talk on component APIs, accessibility, and shipping
faster.
</CardDescription>
</CardHeader>
<CardFooter>
<Button className="w-full">View Event</Button>
</CardFooter>
</Card>
)
}

52
client/cms/src/components/workbenchCards/event-card.view.tsx Normal file
View File

@@ -0,0 +1,52 @@
import dayjs from 'dayjs';
import { Calendar } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
Card,
CardAction,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
export function EventCardView({ type, coverImage, eventName, description, startTime, endTime }:
{
type: 'official' | 'party';
coverImage: string;
eventName: string;
description: string;
startTime: Date;
endTime: Date;
}) {
const startDayJs = dayjs(startTime);
const endDayJs = dayjs(endTime);
return (
<Card className="relative mx-auto w-full max-w-sm pt-0">
<div className="absolute inset-0 z-30 aspect-video bg-black/10" />
<img
src={coverImage}
alt="Event cover"
className="relative z-20 aspect-video w-full object-cover rounded-t-xl"
/>
<CardHeader>
<CardAction>
{type === 'official' ? <Badge variant="secondary">Official</Badge> : <Badge variant="destructive">Party</Badge>}
</CardAction>
<CardTitle>{eventName}</CardTitle>
<CardDescription className="flex flex-row items-center text-xs">
<Calendar className="size-4 mr-2" />
{`${startDayJs.format('YYYY/MM/DD')} - ${endDayJs.format('YYYY/MM/DD')}`}
</CardDescription>
<CardDescription className="mt-1">
{description}
</CardDescription>
</CardHeader>
<CardFooter>
<Button className="w-full">加入活动</Button>
</CardFooter>
</Card>
);
}