Feat: Modify background color of Card #3221 (#7421)

### What problem does this PR solve?

Feat: Modify background color of Card #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-04-30 09:12:28 +08:00
committed by GitHub
parent 093d280528
commit 538a408608
9 changed files with 95 additions and 22 deletions

View File

@ -1,6 +1,7 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Card, CardContent } from '@/components/ui/card';
import { formatDate } from '@/utils/date';
import { ChevronRight } from 'lucide-react';
type ApplicationCardProps = {
app: {
@ -12,19 +13,33 @@ type ApplicationCardProps = {
export function ApplicationCard({ app }: ApplicationCardProps) {
return (
<Card className="bg-colors-background-inverse-weak border-colors-outline-neutral-standard w-64">
<CardContent className="p-4 flex items-center gap-6">
<Card className="w-[264px]">
<CardContent className="p-2.5 flex items-center gap-2.5">
<Avatar className="size-14 rounded-lg">
<AvatarImage src={app.avatar === null ? '' : app.avatar} />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="flex-1">
<h3 className="text-lg font-semibold line-clamp-1 mb-1">
{app.title}
</h3>
<p className="text-sm opacity-80">{formatDate(app.update_time)}</p>
<h3 className="text-sm font-normal line-clamp-1 mb-1">{app.title}</h3>
<p className="text-xs font-normal text-text-sub-title">
{formatDate(app.update_time)}
</p>
</div>
</CardContent>
</Card>
);
}
export type SeeAllAppCardProps = {
click(): void;
};
export function SeeAllAppCard({ click }: SeeAllAppCardProps) {
return (
<Card className="w-64 min-h-[76px]" onClick={click}>
<CardContent className="p-2.5 pt-1 w-full h-full flex items-center justify-center gap-1.5 text-text-sub-title">
See All <ChevronRight className="size-4" />
</CardContent>
</Card>
);
}