beau/my-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Extract helper function to build css class names

Browse Source
This commit is contained in:
Beau Findlay
2024-04-26 13:57:19 +01:00
parent 390c7f388a
commit 474d0ed5bf
6 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Client/src/components/AboutTabs.tsx
View File

@@ -1,10 +1,7 @@
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
import { Fragment } from "react"; import { Fragment } from "react";
import Subtitle from "./Subtitle"; import Subtitle from "./Subtitle";
import buildClassNames from "../helpers/cssClassFormatter";
function classNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}
export default function AboutTabs() { export default function AboutTabs() {
return ( return (
@@ -14,7 +11,7 @@ export default function AboutTabs() {
<Tab.List className="-mb-px flex space-x-8"> <Tab.List className="-mb-px flex space-x-8">
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
classNames( buildClassNames(
selected selected
? "border-gray-300 text-gray-200" ? "border-gray-300 text-gray-200"
: "border-transparent hover:border-gray-300 hover:text-gray-200", : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -26,7 +23,7 @@ export default function AboutTabs() {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
classNames( buildClassNames(
selected selected
? "border-gray-300 text-gray-200" ? "border-gray-300 text-gray-200"
: "border-transparent hover:border-gray-300 hover:text-gray-200", : "border-transparent hover:border-gray-300 hover:text-gray-200",
@@ -38,7 +35,7 @@ export default function AboutTabs() {
</Tab> </Tab>
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
classNames( buildClassNames(
selected selected
? "border-gray-300 text-gray-200" ? "border-gray-300 text-gray-200"
: "border-transparent hover:border-gray-300 hover:text-gray-200", : "border-transparent hover:border-gray-300 hover:text-gray-200",

4
src/Client/src/components/Link.tsx
View File

@@ -1,3 +1,5 @@
import buildClassNames from "../helpers/cssClassFormatter";
interface Props { interface Props {
children: string; children: string;
href?: string; href?: string;
@@ -7,7 +9,7 @@ interface Props {
export default function Link({ children, href, target, className }: Props) { export default function Link({ children, href, target, className }: Props) {
const defaultStyles = "underline underline-offset-2 hover:underline-offset-4"; const defaultStyles = "underline underline-offset-2 hover:underline-offset-4";
const styles = className ? `${defaultStyles} ${className}` : defaultStyles; const styles = buildClassNames(className ? className : "", defaultStyles);
return ( return (
<a href={href} target={target} className={styles}> <a href={href} target={target} className={styles}>

4
src/Client/src/components/Subtitle.tsx
View File

@@ -1,3 +1,5 @@
import buildClassNames from "../helpers/cssClassFormatter";
interface Props { interface Props {
children: string; children: string;
className?: string | null; className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
export default function Subtitle({ children, className }: Props) { export default function Subtitle({ children, className }: Props) {
const defaultStyles = "text-2xl py-4 font-semibold"; const defaultStyles = "text-2xl py-4 font-semibold";
const styles = className ? `${defaultStyles} ${className}` : defaultStyles; const styles = buildClassNames(className ? className : "", defaultStyles);
return <h2 className={styles}>{children}</h2>; return <h2 className={styles}>{children}</h2>;
} }

3
src/Client/src/components/Text.tsx
View File

@@ -1,4 +1,5 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import buildClassNames from "../helpers/cssClassFormatter";
interface Props { interface Props {
children: ReactNode; children: ReactNode;
@@ -7,7 +8,7 @@ interface Props {
export default function Text({ children, className }: Props) { export default function Text({ children, className }: Props) {
const defaultStyles = "text-lg py-2"; const defaultStyles = "text-lg py-2";
const styles = className ? `${defaultStyles} ${className}` : defaultStyles; const styles = buildClassNames(className ? className : "", defaultStyles);
return <p className={styles}>{children}</p>; return <p className={styles}>{children}</p>;
} }

4
src/Client/src/components/Title.tsx
View File

@@ -1,3 +1,5 @@
import buildClassNames from "../helpers/cssClassFormatter";
interface Props { interface Props {
children: string; children: string;
className?: string | null; className?: string | null;
@@ -5,7 +7,7 @@ interface Props {
export default function Title({ children, className }: Props) { export default function Title({ children, className }: Props) {
const defaultStyles = "text-4xl py-4"; const defaultStyles = "text-4xl py-4";
const styles = className ? `${defaultStyles} ${className}` : defaultStyles; const styles = buildClassNames(className ? className : "", defaultStyles);
return <h1 className={styles}>{children}</h1>; return <h1 className={styles}>{children}</h1>;
} }

3
src/Client/src/helpers/cssClassFormatter.ts Normal file
View File

@@ -0,0 +1,3 @@
export default function buildClassNames(...classes: string[]) {
return classes.filter(Boolean).join(" ");
}