Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Benjamin Toby
2024-10-16 15:20:34 +01:00
commit 25daf1844e
30 changed files with 617 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/ColorSchemeSelector.tsx
+19
View File
@@ -0,0 +1,19 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";
export default function ColorSchemeSelector({
toggleProps,
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
toggleProps?: TWUI_TOGGLE_PROPS;
}) {
return (
<div
{...props}
className={twMerge("flex flex-row items-center", props.className)}
>
<Toggle {...toggleProps} />
</div>
);
}
components/elements/Toggle.tsx
+47
View File
@@ -0,0 +1,47 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
HTMLAttributes<HTMLDivElement>,
HTMLDivElement
> & {
active?: boolean;
circleProps?: DetailedHTMLProps<
HTMLAttributes<HTMLDivElement>,
HTMLDivElement
>;
};
/**
* # Toggle Component
* @className_wrapper twui-toggle-wrapper
* @className_circle twui-toggle-circle
*/
export default function Toggle({
circleProps,
active,
...props
}: TWUI_TOGGLE_PROPS) {
return (
<div
{...props}
className={twMerge(
"flex flex-row items-center w-full max-w-[200px]",
"border border-slate-300 border-solid rounded-full",
active ? "" : "",
"twui-toggle-wrapper",
props.className
)}
>
<div
{...circleProps}
className={twMerge(
"w-20 h-20 rounded-full",
active ? "" : "",
"twui-toggle-circle",
circleProps?.className
)}
></div>
</div>
);
}
components/form/Form.tsx
+17
View File
@@ -0,0 +1,17 @@
import { DetailedHTMLProps, FormHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Form({
...props
}: DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) {
return (
<form
{...props}
className={twMerge(
"flex flex-col items-start gap-4 w-full",
"twui-form",
props.className
)}
></form>
);
}
components/form/Input.tsx
+17
View File
@@ -0,0 +1,17 @@
import { DetailedHTMLProps, InputHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Input({
...props
}: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
return (
<input
{...props}
className={twMerge(
"w-full px-4 py-2 border border-slate-300 rounded",
"twui-input",
props.className
)}
/>
);
}
components/layout/Button.tsx
+65
View File
@@ -0,0 +1,65 @@
import {
AnchorHTMLAttributes,
ButtonHTMLAttributes,
DetailedHTMLProps,
HTMLAttributeAnchorTarget,
HTMLAttributes,
} from "react";
import { ClassNameValue, twMerge } from "tailwind-merge";
export default function Button({
href,
target,
variant,
color,
linkProps,
...props
}: DetailedHTMLProps<
ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
> & {
variant?: "normal" | "ghost" | "outlined";
color?: "primary" | "secondary" | "accent";
href?: string;
target?: HTMLAttributeAnchorTarget;
linkProps?: DetailedHTMLProps<
AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>;
}) {
const finalClassName: string = (() => {
if (variant == "normal" || !variant) {
if (color == "primary" || !color) return "bg-blue-500 text-white";
} else if (variant == "outlined") {
if (color == "primary" || !color)
return (
"bg-transparent outline outline-1 outline-blue-500" +
" text-blue-500"
);
} else if (variant == "ghost") {
}
return "";
})();
const buttonComponent = (
<button
{...props}
className={twMerge(
"bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
finalClassName,
props.className
)}
>
{props.children}
</button>
);
if (href)
return (
<a {...linkProps} href={href} target={target}>
{buttonComponent}
</a>
);
return buttonComponent;
}
components/layout/Container.tsx
+23
View File
@@ -0,0 +1,23 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
/**
* # Default Container
* @className twui-container
*/
export default function Container({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
return (
<div
{...props}
className={twMerge(
"flex flex-row items-center w-full max-w-[1200px]",
"twui-container",
props.className
)}
>
{props.children}
</div>
);
}
components/layout/Footer.tsx
+21
View File
@@ -0,0 +1,21 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Footer({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
return (
<header
{...props}
className={twMerge(
"flex flex-col items-center justify-center",
"px-4 sm:px-10 py-2",
"border-0 border-b border-slate-200 border-solid",
"twui-footer",
props.className
)}
>
{props.children}
</header>
);
}
components/layout/H1.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function H1({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<h1 {...props} className={twMerge("text-5xl mb-4", props.className)}>
{props.children}
</h1>
);
}
components/layout/H2.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function H2({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<h2 {...props} className={twMerge("text-3xl mb-4", props.className)}>
{props.children}
</h2>
);
}
components/layout/H3.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function H3({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<h3 {...props} className={twMerge("text-xl mb-4", props.className)}>
{props.children}
</h3>
);
}
components/layout/H4.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function H4({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<h4 {...props} className={twMerge("text-base mb-4", props.className)}>
{props.children}
</h4>
);
}
components/layout/H5.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function H5({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<h5 {...props} className={twMerge("text-sm mb-4", props.className)}>
{props.children}
</h5>
);
}
components/layout/HR.tsx
+16
View File
@@ -0,0 +1,16 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function HR({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>) {
return (
<hr
{...props}
className={twMerge(
"bg-slate-400 w-full dark:bg-white/20 my-4",
props.className
)}
/>
);
}
components/layout/Header.tsx
+25
View File
@@ -0,0 +1,25 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
/**
* # Default Header
* @className twui-header
*/
export default function Header({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
return (
<header
{...props}
className={twMerge(
"flex flex-col items-center justify-center",
"px-4 sm:px-10 py-2",
"border-0 border-b border-slate-200 border-solid",
"twui-header",
props.className
)}
>
{props.children}
</header>
);
}
components/layout/Link.tsx
+21
View File
@@ -0,0 +1,21 @@
import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
import { twMerge } from "tailwind-merge";
export default function Link({
...props
}: DetailedHTMLProps<
AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement
>) {
return (
<a
{...props}
className={twMerge(
"text-base text-link-500 no-underline hover:text-link-500/50",
props.className
)}
>
{props.children}
</a>
);
}
components/layout/Main.tsx
+18
View File
@@ -0,0 +1,18 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Main({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
return (
<main
{...props}
className={twMerge(
"flex flex-col items-start w-full",
props.className
)}
>
{props.children}
</main>
);
}
components/layout/P.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function P({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<p {...props} className={twMerge("text-base py-4", props.className)}>
{props.children}
</p>
);
}
components/layout/Row.tsx
+18
View File
@@ -0,0 +1,18 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Row({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
return (
<div
{...props}
className={twMerge(
"flex flex-row items-center gap-2",
props.className
)}
>
{props.children}
</div>
);
}
components/layout/Section.tsx
+19
View File
@@ -0,0 +1,19 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Section({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
return (
<section
{...props}
className={twMerge(
"flex flex-col items-center w-full",
"px-4 sm:px-10 py-10",
props.className
)}
>
{props.children}
</section>
);
}
components/layout/Span.tsx
+12
View File
@@ -0,0 +1,12 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Span({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
return (
<span {...props} className={twMerge("text-base", props.className)}>
{props.children}
</span>
);
}
components/layout/Stack.tsx
+15
View File
@@ -0,0 +1,15 @@
import { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
export default function Stack({
...props
}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
return (
<div
{...props}
className={twMerge("flex flex-col items-start", props.className)}
>
{props.children}
</div>
);
}