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

♻️ Use cn util (#1589)

Browse source
This commit is contained in:
Luke Vella 2025-02-28 11:02:28 +00:00 • committed by GitHub
parent 05c6cd7735
commit b8a7e9746b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 23 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/date-card.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import * as React from "react";
export interface DateCardProps {
@ -15,7 +15,7 @@ const DateCard: React.FunctionComponent<DateCardProps> = ({
}) => {
return (
<div
className={clsx(
className={cn(
"relative inline-flex size-12 flex-col rounded-md border bg-gray-50 text-center text-slate-800",
className,
)}

4
apps/web/src/components/date-icon.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";
@ -10,7 +10,7 @@ export const DateIconInner = (props: {
}) => {
return (
<div
className={clsx(
className={cn(
"inline-flex size-10 flex-col overflow-hidden rounded-md border bg-gray-50 text-center text-slate-800",
props.className,
)}

7
apps/web/src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -8,7 +8,6 @@ import {
} from "@rallly/ui/dropdown-menu";
import { Icon } from "@rallly/ui/icon";
import { Switch } from "@rallly/ui/switch";
import clsx from "clsx";
import dayjs from "dayjs";
import {
CalendarIcon,
@ -129,7 +128,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
return (
<div
key={i}
className={clsx("h-11", {
className={cn("h-11", {
"border-r": (i + 1) % 7 !== 0,
"border-b": i < datepicker.days.length - 7,
})}
@ -174,7 +173,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
}
}
}}
className={clsx(
className={cn(
"group relative flex h-full w-full items-start justify-end rounded-none px-2.5 py-1.5 text-sm font-medium tracking-tight focus:z-10 focus:rounded",
{
"bg-gray-100 text-gray-400": day.isPast,
@ -208,7 +207,7 @@ const MonthCalendar: React.FunctionComponent<DateTimePickerProps> = ({
</div>
<div className="flex grow flex-col">
<div
className={clsx("border-b", {
className={cn("border-b", {
hidden: datepicker.selection.length === 0,
})}
>

4
apps/web/src/components/new-participant-modal.tsx
View file

@ -1,12 +1,12 @@
import { zodResolver } from "@hookform/resolvers/zod";
import type { VoteType } from "@rallly/database";
import { cn } from "@rallly/ui";
import { Badge } from "@rallly/ui/badge";
import { Button } from "@rallly/ui/button";
import { FormMessage } from "@rallly/ui/form";
import { Input } from "@rallly/ui/input";
import * as Sentry from "@sentry/nextjs";
import { TRPCClientError } from "@trpc/client";
import clsx from "clsx";
import { useTranslation } from "next-i18next";
import { useForm } from "react-hook-form";
import z from "zod";
@ -59,7 +59,7 @@ const VoteSummary = ({
return (
<div
className={clsx("flex flex-wrap gap-1.5 rounded border p-1.5", className)}
className={cn("flex flex-wrap gap-1.5 rounded border p-1.5", className)}
>
{voteTypes.map((voteType) => {
const votes = voteByType[voteType];

4
apps/web/src/components/poll/mobile-poll/grouped-options.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import { groupBy } from "lodash";
import * as React from "react";
@ -28,7 +28,7 @@ const GroupedOptions: React.FunctionComponent<GroupedOptionsProps> = ({
return (
<div key={day}>
<div
className={clsx(
className={cn(
"flex border-b bg-gray-50 px-4 py-2 text-xs font-medium uppercase",
groupClassName,
)}

10
apps/web/src/components/poll/vote-icon.tsx
View file

@ -1,6 +1,6 @@
import type { VoteType } from "@rallly/database";
import { IfNeedBeIcon, NoIcon, PendingIcon, YesIcon } from "@rallly/icons";
import clsx from "clsx";
import { cn } from "@rallly/ui";
import * as React from "react";
const VoteIcon: React.FunctionComponent<{
@ -12,7 +12,7 @@ const VoteIcon: React.FunctionComponent<{
case "yes":
return (
<YesIcon
className={clsx("text-green-500", className, {
className={cn("text-green-500", className, {
"size-5": size === "md",
"h-3": size === "sm",
})}
@ -22,7 +22,7 @@ const VoteIcon: React.FunctionComponent<{
case "ifNeedBe":
return (
<IfNeedBeIcon
className={clsx("text-amber-400", className, {
className={cn("text-amber-400", className, {
"size-5": size === "md",
"h-3": size === "sm",
})}
@ -32,7 +32,7 @@ const VoteIcon: React.FunctionComponent<{
case "no":
return (
<NoIcon
className={clsx("text-gray-400", className, {
className={cn("text-gray-400", className, {
"size-5": size === "md",
"h-3": size === "sm",
})}
@ -42,7 +42,7 @@ const VoteIcon: React.FunctionComponent<{
default:
return (
<PendingIcon
className={clsx("text-gray-300", className, {
className={cn("text-gray-300", className, {
"size-5": size === "md",
"h-3": size === "sm",
})}

4
apps/web/src/components/spinner.tsx
View file

@ -1,10 +1,10 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import { Loader2Icon } from "lucide-react";
export const Spinner = (props: { className?: string }) => {
return (
<Loader2Icon
className={clsx(
className={cn(
"text-muted-foreground inline-block h-5 animate-spin",
props.className,
)}

6
apps/web/src/components/steps/steps.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import { useTranslation } from "next-i18next";
import React from "react";
@ -16,7 +16,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
const { t } = useTranslation();
return (
<div className={clsx("inline-flex items-center gap-2.5", className)}>
<div className={cn("inline-flex items-center gap-2.5", className)}>
<div className="text-sm font-medium tracking-tight">
{t("stepSummary", {
current: current + 1,
@ -28,7 +28,7 @@ const Steps: React.FunctionComponent<StepsProps> = ({
return (
<span
key={i}
className={clsx("h-2 w-2 rounded-full transition-all", {
className={cn("h-2 w-2 rounded-full transition-all", {
"bg-primary-400": i <= current,
"bg-gray-300": i > current,
"ring-primary-200 animate-pulse ring-4": i === current,

4
apps/web/src/components/sticky.tsx
View file

@ -1,4 +1,4 @@
import clsx from "clsx";
import { cn } from "@rallly/ui";
import React from "react";
export const useDetectSticky = <E extends HTMLElement>(
@ -35,7 +35,7 @@ export const Sticky: React.FunctionComponent<{
return (
<div
ref={ref}
className={clsx(
className={cn(
"sticky",
typeof className === "function" ? className(isPinned) : className,
)}