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

✨ Show duration (#1098)

Browse source
This commit is contained in:
Luke Vella 2024-05-16 12:31:26 +08:00 • committed by GitHub
parent 91badcb48b
commit dee3e1b7d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

29
apps/web/src/components/poll/desktop-poll/poll-header.tsx
View file

@ -1,5 +1,4 @@
import { cn } from "@rallly/ui";
import { Icon } from "@rallly/ui/icon";
import {
Tooltip,
TooltipContent,
@ -20,20 +19,21 @@ const TimeRange: React.FunctionComponent<{
className?: string;
}> = ({ start, end, duration, className }) => {
return (
<div className={cn("text-muted-foreground text-xs font-normal", className)}>
<div
className={cn(
"text-muted-foreground relative flex flex-col items-center gap-1.5 text-xs font-normal",
className,
)}
>
<span>{start}</span>
<Tooltip delayDuration={0}>
<TooltipTrigger>{start}</TooltipTrigger>
<TooltipTrigger className="flex items-center gap-x-1 opacity-50">
<ClockIcon className="size-3" />
{duration}
</TooltipTrigger>
<TooltipPortal>
<TooltipContent className="flex gap-x-2.5 text-xs">
<span>
{start} - {end}
</span>
<span className="flex items-center gap-x-1 text-gray-500">
<Icon>
<ClockIcon />
</Icon>
{duration}
</span>
<TooltipContent className="text-xs">
{start} - {end}
</TooltipContent>
</TooltipPortal>
</Tooltip>
@ -150,7 +150,8 @@ const PollHeader: React.FunctionComponent = () => {
duration={option.duration}
/>
) : (
<p className="text-muted-foreground text-xs font-normal">
<p className="text-muted-foreground flex items-center gap-x-1 text-xs font-normal opacity-50">
<ClockIcon className="size-3" />
<Trans i18nKey="allDay" defaults="All-Day" />
</p>
)}

6
apps/web/src/components/poll/mobile-poll/time-slot-option.tsx
View file

@ -1,3 +1,4 @@
import { ClockIcon } from "lucide-react";
import * as React from "react";
import PollOption, { PollOptionProps } from "./poll-option";
@ -11,12 +12,17 @@ export interface TimeSlotOptionProps extends PollOptionProps {
const TimeSlotOption: React.FunctionComponent<TimeSlotOptionProps> = ({
startTime,
endTime,
duration,
...rest
}) => {
return (
<PollOption {...rest}>
<div className="flex items-center gap-x-4 text-sm">
<div>{`${startTime} - ${endTime}`}</div>
<div className="flex items-center gap-x-1.5 opacity-50">
<ClockIcon className="size-4" />
{duration}
</div>
</div>
</PollOption>
);