3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-03 00:19:03 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add icon guide (#1172)

Browse source
This commit is contained in:
Luke Vella 2024-06-20 11:36:54 +01:00 • committed by GitHub
parent 5081af464c
commit 293e146d1e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 33 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

43
apps/web/src/components/event-card.tsx
View file

@ -7,11 +7,31 @@ import { DotIcon, MapPinIcon, PauseIcon } from "lucide-react";
import { useTranslation } from "@/app/i18n/client";
import TruncatedLinkify from "@/components/poll/truncated-linkify";
import VoteIcon from "@/components/poll/vote-icon";
import { PollStatusBadge } from "@/components/poll-status";
import { RandomGradientBar } from "@/components/random-gradient-bar";
import { Trans } from "@/components/trans";
import { usePoll } from "@/contexts/poll";
function IconGuide() {
return (
<ul className="flex items-center gap-x-3 whitespace-nowrap text-sm">
<li className="flex items-center gap-1.5">
<VoteIcon type="yes" />
<Trans i18nKey="yes" />
</li>
<li className="flex items-center gap-1.5">
<VoteIcon type="ifNeedBe" />
<Trans i18nKey="ifNeedBe" />
</li>
<li className="flex items-center gap-1.5">
<VoteIcon type="no" />
<Trans i18nKey="no" />
</li>
</ul>
);
}
export function EventCard() {
const poll = usePoll();
const { t } = useTranslation();
@ -19,7 +39,7 @@ export function EventCard() {
<>
<Card className="bg-gray-50">
<RandomGradientBar seed={poll.id} />
<CardContent>
<CardContent className="space-y-4 sm:space-y-6">
<div className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between">
<div>
<h1 data-testid="poll-title" className="text-lg font-semibold">
@ -53,18 +73,21 @@ export function EventCard() {
<PollStatusBadge status={poll.status} />
</div>
{poll.description ? (
<p className="mt-4 min-w-0 whitespace-pre-wrap text-pretty text-sm leading-relaxed">
<p className="min-w-0 whitespace-pre-wrap text-pretty text-sm leading-relaxed">
<TruncatedLinkify>{poll.description}</TruncatedLinkify>
</p>
) : null}
{poll.location ? (
<p className="text-muted-foregroun mt-4 text-sm">
<Icon>
<MapPinIcon className="-mt-0.5 mr-2 inline-block" />
</Icon>
<TruncatedLinkify>{poll.location}</TruncatedLinkify>
</p>
) : null}
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:flex-wrap sm:items-center">
<IconGuide />
{poll.location ? (
<p className="text-muted-foregroun truncate whitespace-nowrap text-sm">
<Icon>
<MapPinIcon className="-mt-0.5 mr-1.5 inline-block" />
</Icon>
<TruncatedLinkify>{poll.location}</TruncatedLinkify>
</p>
) : null}
</div>
</CardContent>
</Card>
{poll.status === "paused" ? (