3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-08-06 09:59:00 +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

31
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 { useTranslation } from "@/app/i18n/client";
import TruncatedLinkify from "@/components/poll/truncated-linkify"; import TruncatedLinkify from "@/components/poll/truncated-linkify";
import VoteIcon from "@/components/poll/vote-icon";
import { PollStatusBadge } from "@/components/poll-status"; import { PollStatusBadge } from "@/components/poll-status";
import { RandomGradientBar } from "@/components/random-gradient-bar"; import { RandomGradientBar } from "@/components/random-gradient-bar";
import { Trans } from "@/components/trans"; import { Trans } from "@/components/trans";
import { usePoll } from "@/contexts/poll"; 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() { export function EventCard() {
const poll = usePoll(); const poll = usePoll();
const { t } = useTranslation(); const { t } = useTranslation();
@ -19,7 +39,7 @@ export function EventCard() {
<> <>
<Card className="bg-gray-50"> <Card className="bg-gray-50">
<RandomGradientBar seed={poll.id} /> <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 className="flex flex-col items-start gap-4 lg:flex-row lg:justify-between">
<div> <div>
<h1 data-testid="poll-title" className="text-lg font-semibold"> <h1 data-testid="poll-title" className="text-lg font-semibold">
@ -53,18 +73,21 @@ export function EventCard() {
<PollStatusBadge status={poll.status} /> <PollStatusBadge status={poll.status} />
</div> </div>
{poll.description ? ( {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> <TruncatedLinkify>{poll.description}</TruncatedLinkify>
</p> </p>
) : null} ) : null}
<div className="flex flex-col justify-between gap-4 sm:flex-row sm:flex-wrap sm:items-center">
<IconGuide />
{poll.location ? ( {poll.location ? (
<p className="text-muted-foregroun mt-4 text-sm"> <p className="text-muted-foregroun truncate whitespace-nowrap text-sm">
<Icon> <Icon>
<MapPinIcon className="-mt-0.5 mr-2 inline-block" /> <MapPinIcon className="-mt-0.5 mr-1.5 inline-block" />
</Icon> </Icon>
<TruncatedLinkify>{poll.location}</TruncatedLinkify> <TruncatedLinkify>{poll.location}</TruncatedLinkify>
</p> </p>
) : null} ) : null}
</div>
</CardContent> </CardContent>
</Card> </Card>
{poll.status === "paused" ? ( {poll.status === "paused" ? (