Skip to content

Commit eedb936

Browse files
Emmanuel-DevelopsEmmanuel-Develops
committed
fix: composable classnames
1 parent b5b5414 commit eedb936

File tree

6 files changed

+32
-18
lines changed

6 files changed

+32
-18
lines changed

‎src/components/carousel/CarouselComponents.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react'
22
import { CarouselContextType, useCarousel } from './Carousel';
33
import { ComponentStylePrimitiveProps } from '../../primitives/types';
4+
import { twMerge } from 'tailwind-merge';
5+
import clsx from 'clsx';
46

57
export interface CarouselContainerProps extends ComponentStylePrimitiveProps<HTMLDivElement> {
68
children: React.ReactNode
@@ -10,7 +12,7 @@ export const CarouselContainer: React.FC<CarouselContainerProps> = ({ children,
1012
const { className, ...rest } = props
1113
const { containerRef } = useCarousel();
1214
return (
13-
<div ref={containerRef} className={`max-w-full h-full flex overflow-scroll gap-2 no-scrollbar ${className}`} {...rest}>
15+
<div ref={containerRef} className={twMerge(clsx('max-w-full h-full flex overflow-scroll gap-2 no-scrollbar', className))} {...rest}>
1416
{children}
1517
</div>
1618
)
@@ -21,7 +23,7 @@ export interface CarouselItemProps extends CarouselContainerProps { }
2123
export const CarouselItem: React.FC<CarouselItemProps> = ({ children, ...props }) => {
2224
const { className, ...rest } = props
2325
return (
24-
<div className={`flex-shrink-0 relative ${className}`} {...rest}>
26+
<div className={twMerge(clsx('flex-shrink-0 relative', className))} {...rest}>
2527
{children}
2628
</div>
2729
)
@@ -33,7 +35,7 @@ export interface CarouselControlProps extends ComponentStylePrimitiveProps<HTMLD
3335

3436
export const CarouselControls: React.FC<CarouselControlProps> = ({ children, className, ...props }) => {
3537
return (
36-
<div className={`flex items-center gap-2 md:gap-4 w-fit mx-auto pt-4 ${className}`} {...props}>
38+
<div className={twMerge(clsx('flex items-center gap-2 md:gap-4 w-fit mx-auto pt-4', className))} {...props}>
3739
{children}
3840
</div>
3941
)
@@ -58,7 +60,7 @@ export const CarouselPreviousButton: React.FC<CarouselButtonProps> = ({ children
5860
const { icon, className, ...rest } = props
5961

6062
return (
61-
<button onClick={goToPreviousSlide} disabled={!possibleDirection.canGoToPreviousSlide} className={`w-10 h-10 flex items-center justify-center rounded-full border border-gray-600 dark:border-gray-300 p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:dark:hover:bg-transparent ${className}`} {...rest}>
63+
<button onClick={goToPreviousSlide} disabled={!possibleDirection.canGoToPreviousSlide} className={twMerge(clsx('w-10 h-10 flex items-center justify-center rounded-full border border-gray-600 dark:border-gray-300 p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:dark:hover:bg-transparent', className))} {...rest}>
6264
{icon}
6365
</button>
6466
);
@@ -79,7 +81,7 @@ export const CarouselNextButton: React.FC<CarouselButtonProps> = ({ children, ..
7981
const { icon, className, ...rest } = props
8082

8183
return (
82-
<button onClick={goToNextSlide} disabled={!possibleDirection.canGoToNextSlide} className={`w-10 h-10 flex items-center justify-center rounded-full border border-gray-600 dark:border-gray-300 p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:dark:hover:bg-transparent ${className}`} {...rest}>
84+
<button onClick={goToNextSlide} disabled={!possibleDirection.canGoToNextSlide} className={twMerge(clsx('w-10 h-10 flex items-center justify-center rounded-full border border-gray-600 dark:border-gray-300 p-2 text-gray-600 dark:text-gray-300 transition-colors hover:bg-gray-100 dark:hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent disabled:dark:hover:bg-transparent', className))} {...rest}>
8385
{icon}
8486
</button>
8587
);

‎src/components/footer/Footer.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import FooterFeedback, { FooterFeedbackProps } from "./FooterFeedback";
44
import { FooterSocials, FooterSocialsProps } from "./FooterSocials";
55
import FooterPublic, { FooterPublicProps } from "./FooterPublic";
66
import { FooterPartsPrimitiveProps } from "./types";
7+
import { twMerge } from "tailwind-merge";
8+
import clsx from "clsx";
79

810
export interface FooterRootProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
911
separator?: React.ReactElement;
@@ -37,7 +39,7 @@ const Footer: React.FC<FooterRootProps> & {
3739
};
3840

3941
return (
40-
<div className={`flex flex-col md:flex-row w-full justify-between sm:items-stretch md:items-center bg-white dark:bg-black gap-[20px] md:gap-[24px] mx-auto max-w-[1920px] p-2 ${className}`} {...rest}>
42+
<div className={twMerge(clsx('flex flex-col md:flex-row w-full justify-between sm:items-stretch md:items-center bg-white dark:bg-black gap-[20px] md:gap-[24px] mx-auto max-w-[1920px] p-2', className))} {...rest}>
4143
{renderChildrenWithSeparator()}
4244
</div>
4345
);

‎src/components/footer/FooterAbout.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
import React from "react"
22
import { FooterPartsPrimitiveProps } from "./types"
3+
import { twMerge } from "tailwind-merge"
4+
import clsx from "clsx"
35

46
export interface FooterAboutProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
57
entityLink?: string
68
entityName?: string
79
}
810

911
const FooterAbout = (props: React.PropsWithChildren<FooterAboutProps>) => {
10-
const { className: classname, children, entityLink, entityName, ...rest } = props
12+
const { className, children, entityLink, entityName, ...rest } = props
1113
if (children) {
12-
<div {...rest} className={classname}>
14+
<div {...rest} className={className}>
1315
{props.children}
1416
</div>
1517
}
18+
1619
return (
17-
<div {...rest} className={`leading-none md:leading-tight text-sm text-gray-500 dark:text-gray-400 ${classname}`}>
20+
<div {...rest} className={twMerge(clsx('leading-none md:leading-tight text-sm text-gray-500 dark:text-gray-400', className))}>
1821
Built with <span>🧡</span> by the{" "}
1922
<a
2023
href={entityLink ?? "https://bitcoindevs.xyz/"}

‎src/components/footer/FooterFeedback.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
22
import { FooterPartsPrimitiveProps } from "./types";
3+
import { twMerge } from "tailwind-merge";
4+
import clsx from "clsx";
35

46
export interface FooterFeedbackProps extends FooterPartsPrimitiveProps<HTMLDivElement> {
57
feedbackLink: string;
@@ -8,7 +10,7 @@ export interface FooterFeedbackProps extends FooterPartsPrimitiveProps<HTMLDivEl
810
const FooterFeedback = (
911
props: React.PropsWithChildren<FooterFeedbackProps>
1012
) => {
11-
const { className: classname, children, feedbackLink, ...rest } = props;
13+
const { className, children, feedbackLink, ...rest } = props;
1214
if (children) {
1315
<div {...rest} className={props.className}>
1416
{props.children}
@@ -17,7 +19,7 @@ const FooterFeedback = (
1719
return (
1820
<div
1921
{...rest}
20-
className={`leading-none md:leading-tight flex flex-col sm:flex-row items-stretch sm:items-center text-sm text-gray-500 dark:text-gray-400 gap-[20px] md:gap-[24px] ${classname}`}
22+
className={twMerge(clsx('leading-none md:leading-tight flex flex-col sm:flex-row items-stretch sm:items-center text-sm text-gray-500 dark:text-gray-400 gap-[20px] md:gap-[24px]', className))}
2123
>
2224
<span>We&apos;d love to hear your feedback on this project?</span>
2325
<a

‎src/components/footer/FooterPublic.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import React from "react";
22
import { FooterPartsPrimitiveProps } from "./types";
3+
import { twMerge } from "tailwind-merge";
4+
import clsx from "clsx";
35

46
export interface FooterPublicProps extends FooterPartsPrimitiveProps<HTMLAnchorElement> {
57
dshboardLink: string;
68
}
79

810

9-
const FooterPublic = ({ className: classname, dshboardLink, ...rest }: FooterPublicProps) => {
11+
const FooterPublic = ({ className, dshboardLink, ...rest }: FooterPublicProps) => {
1012
return (
1113
<a
1214
href={dshboardLink}
1315
target="_blank"
1416
rel="noreferrer"
15-
className={`leading-none md:leading-tight text-sm text-gray-500 dark:text-gray-400 underline ${classname}`}
17+
className={twMerge(clsx('leading-none md:leading-tight text-sm text-gray-500 dark:text-gray-400 underline', className))}
1618
{...rest}
1719
>
1820
View our public visitor count

‎src/components/footer/FooterSocials.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react";
22
import { FooterPartsPrimitiveProps } from "./types";
33
import { TwitterXIcon, GithubIcon, DiscordIcon, NostrIcon } from "../../icons";
4+
import { twMerge } from "tailwind-merge";
5+
import clsx from "clsx";
46

57
type SupportedSocialMedia = "twitter" | "github" | "discord" | "nostr";
68

@@ -32,16 +34,16 @@ const Platform = ({ platform }: { platform: SocialMediaProps }) => {
3234
return React.cloneElement(icon, { ...rest, className });
3335
}
3436
if (entity === "twitter") {
35-
return <TwitterXIcon className={`w-full ${className}`} {...rest} />;
37+
return <TwitterXIcon className={twMerge(clsx('w-full', className))} {...rest} />;
3638
}
3739
if (entity === "github") {
38-
return <GithubIcon className={`w-full ${className}`} {...rest} />;
40+
return <GithubIcon className={twMerge(clsx('w-full', className))} {...rest} />;
3941
}
4042
if (entity === "discord") {
41-
return <DiscordIcon className={`w-full ${className}`} {...rest} />;
43+
return <DiscordIcon className={twMerge(clsx('w-full', className))} {...rest} />;
4244
}
4345
if (entity === "nostr") {
44-
return <NostrIcon className={`w-full ${className}`} {...rest} />;
46+
return <NostrIcon className={twMerge(clsx('w-full', className))} {...rest} />;
4547
}
4648
};
4749
const iconElement = getIcon(entity);
@@ -79,10 +81,11 @@ export const FooterSocials = (
7981
{props.children}
8082
</div>;
8183
}
84+
const resolvedClassName = twMerge(clsx('text-black mb-[6px] md:mb-0 dark:text-white flex w-fit max-w-full gap-[24px]', classname));
8285
return (
8386
<div
8487
{...rest}
85-
className={`text-black mb-[6px] md:mb-0 dark:text-white flex w-fit max-w-full gap-[24px] ${classname}`}
88+
className={resolvedClassName}
8689
>
8790
{platforms.map((platform) => (
8891
<Platform key={platform.entity} platform={platform} />

0 commit comments

Comments
 (0)