First Commit

components/lib/layout/Button.tsx

@@ -0,0 +1,204 @@
+import {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    DetailedHTMLProps,
+    HTMLAttributeAnchorTarget,
+    HTMLAttributes,
+} from "react";
+import { twMerge } from "tailwind-merge";
+import Loading from "../elements/Loading";
+
+/**
+ * # Buttons
+ * @className twui-button-general
+ * @className twui-button-content-wrapper
+ * @className twui-button-primary
+ * @className twui-button-primary-outlined
+ * @className twui-button-primary-ghost
+ * @className twui-button-secondary
+ * @className twui-button-secondary-outlined
+ * @className twui-button-secondary-ghost
+ * @className twui-button-accent
+ * @className twui-button-accent-outlined
+ * @className twui-button-accent-ghost
+ * @className twui-button-gray
+ * @className twui-button-gray-outlined
+ * @className twui-button-gray-ghost
+ */
+export default function Button({
+    href,
+    target,
+    variant,
+    color,
+    size,
+    buttonContentProps,
+    linkProps,
+    beforeIcon,
+    afterIcon,
+    loading,
+    ...props
+}: DetailedHTMLProps<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+> & {
+    variant?: "normal" | "ghost" | "outlined";
+    color?:
+        | "primary"
+        | "secondary"
+        | "accent"
+        | "gray"
+        | "error"
+        | "warning"
+        | "success";
+    size?: "small" | "smaller" | "normal" | "large" | "larger";
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    loading?: boolean;
+    linkProps?: DetailedHTMLProps<
+        AnchorHTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+    >;
+    beforeIcon?: React.ReactNode;
+    afterIcon?: React.ReactNode;
+    buttonContentProps?: DetailedHTMLProps<
+        HTMLAttributes<HTMLDivElement>,
+        HTMLDivElement
+    >;
+}) {
+    const finalClassName: string = (() => {
+        if (variant == "normal" || !variant) {
+            if (color == "primary" || !color)
+                return twMerge(
+                    "bg-blue-500 hover:bg-blue-600 text-white",
+                    "twui-button-primary"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-emerald-500 hover:bg-emerald-600 text-white",
+                    "twui-button-secondary"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-violet-500 hover:bg-violet-600 text-white",
+                    "twui-button-accent"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-slate-300 hover:bg-slate-200 text-slate-800",
+                    "twui-button-gray"
+                );
+        } else if (variant == "outlined") {
+            if (color == "primary" || !color)
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-blue-500",
+                    "text-blue-500 dark:text-blue-400 dark:outline-blue-300",
+                    "twui-button-primary-outlined"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-emerald-500",
+                    "text-emerald-500",
+                    "twui-button-secondary-outlined"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-violet-500",
+                    "text-violet-500",
+                    "twui-button-accent-outlined"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-slate-300",
+                    "text-slate-600 dark:text-white/60 dark:outline-white/30",
+                    "twui-button-gray-outlined"
+                );
+        } else if (variant == "ghost") {
+            if (color == "primary" || !color)
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-blue-500",
+                    "twui-button-primary-ghost"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-emerald-500",
+                    "twui-button-secondary-ghost"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-violet-500",
+                    "twui-button-accent-ghost"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-slate-600 dark:text-white/70",
+                    "twui-button-gray-ghost"
+                );
+            if (color == "error")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-red-600 dark:text-red-400",
+                    "twui-button-error-ghost"
+                );
+            if (color == "warning")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-yellow-600",
+                    "twui-button-warning-ghost"
+                );
+            if (color == "success")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-emerald-600",
+                    "twui-button-success-ghost"
+                );
+        }
+
+        return "";
+    })();
+
+    const buttonComponent = (
+        <button
+            {...props}
+            className={twMerge(
+                "bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
+                "flex items-center justify-center relative transition-all",
+                "twui-button-general",
+                size == "small" && "px-3 py-1.5 text-sm",
+                size == "smaller" && "px-2 py-1 text-xs",
+                size == "large" && "text-lg",
+                size == "larger" && "px-5 py-3 text-xl",
+                finalClassName,
+                props.className,
+                loading ? "pointer-events-none opacity-80" : "l"
+            )}
+        >
+            <div
+                {...buttonContentProps}
+                className={twMerge(
+                    "flex flex-row items-center gap-2",
+                    loading ? "opacity-0" : "",
+                    "twui-button-content-wrapper",
+                    buttonContentProps?.className
+                )}
+            >
+                {beforeIcon && beforeIcon}
+                {props.children}
+                {afterIcon && afterIcon}
+            </div>
+
+            {loading && <Loading className="absolute" />}
+        </button>
+    );
+
+    if (href)
+        return (
+            <a {...linkProps} href={href} target={target}>
+                {buttonComponent}
+            </a>
+        );
+    return buttonComponent;
+}

components/lib/layout/Center.tsx

@@ -0,0 +1,23 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Flexbox Column
+ * @className twui-center
+ */
+export default function Center({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex flex-col items-center justify-center gap-4 p-2 w-full",
+                "twui-center",
+                props.className
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}

components/lib/layout/Container.tsx

@@ -0,0 +1,24 @@
+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 w-full max-w-[1200px] gap-4 justify-between",
+                "flex-wrap flex-col xl:flex-row items-start xl:items-center",
+                "twui-container",
+                props.className
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}

components/lib/layout/Divider.tsx

@@ -0,0 +1,30 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Vertical and Horizontal Divider
+ * @className twui-divider
+ * @className twui-divider-horizontal
+ * @className twui-divider-vertical
+ */
+export default function Divider({
+    vertical,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    vertical?: boolean;
+}) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "border-slate-200 dark:border-white/10",
+                vertical
+                    ? "border-0 border-l h-full min-h-5"
+                    : "border-0 border-t w-full",
+                "twui-divider",
+                vertical ? "twui-divider-vertical" : "twui-divider-horizontal",
+                props.className
+            )}
+        />
+    );
+}

components/lib/layout/Footer.tsx

@@ -0,0 +1,25 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # General Footer
+ * @className twui-footer
+ */
+export default function Footer({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
+    return (
+        <footer
+            {...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}
+        </footer>
+    );
+}

components/lib/layout/H1.tsx

@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # H1 Headers
+ * @className twui-h1
+ */
+export default function H1({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <h1
+            {...props}
+            className={twMerge("text-5xl mb-4", "twui-h1", props.className)}
+        >
+            {props.children}
+        </h1>
+    );
+}

components/lib/layout/H2.tsx

@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # H2 Headers
+ * @className twui-h2
+ */
+export default function H2({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <h2
+            {...props}
+            className={twMerge("text-3xl mb-4", "twui-h2", props.className)}
+        >
+            {props.children}
+        </h2>
+    );
+}

components/lib/layout/H3.tsx

@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # H3 Headers
+ * @className twui-h3
+ */
+export default function H3({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <h3
+            {...props}
+            className={twMerge("text-xl mb-4", "twui-h3", props.className)}
+        >
+            {props.children}
+        </h3>
+    );
+}

components/lib/layout/H4.tsx

@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # H4 Headers
+ * @className twui-h4
+ */
+export default function H4({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <h4
+            {...props}
+            className={twMerge("text-base mb-4", "twui-h4", props.className)}
+        >
+            {props.children}
+        </h4>
+    );
+}

components/lib/layout/H5.tsx

@@ -0,0 +1,19 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # H5 Headers
+ * @className twui-h5
+ */
+export default function H5({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <h5
+            {...props}
+            className={twMerge("text-sm mb-4", "twui-h5", props.className)}
+        >
+            {props.children}
+        </h5>
+    );
+}

components/lib/layout/HR.tsx

@@ -0,0 +1,21 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Horizonta Rule (hr)
+ * @className twui-hr
+ */
+export default function HR({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>) {
+    return (
+        <hr
+            {...props}
+            className={twMerge(
+                "border-slate-200 dark:border-white/20 w-full my-4",
+                "twui-hr",
+                props.className
+            )}
+        />
+    );
+}

components/lib/layout/Header.tsx

@@ -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-3 flex-wrap",
+                "border-0 border-b border-slate-200 dark:border-white/10 border-solid",
+                "twui-header",
+                props.className
+            )}
+        >
+            {props.children}
+        </header>
+    );
+}

components/lib/layout/Link.tsx

@@ -0,0 +1,30 @@
+import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # General Anchor Elements
+ * @className twui-a | twui-anchor
+ */
+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",
+                "text-blue-600 dark:text-blue-400 hover:opacity-60 transition-all",
+                "border-0 border-b border-blue-300 dark:border-blue-200/30 border-solid leading-4",
+                // "focus:text-red-600",
+                "twui-anchor",
+                "twui-a",
+                props.className
+            )}
+        >
+            {props.children}
+        </a>
+    );
+}

components/lib/layout/List.tsx

@@ -0,0 +1,54 @@
+import {
+    AnchorHTMLAttributes,
+    DetailedHTMLProps,
+    HTMLAttributes,
+    OlHTMLAttributes,
+} from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Ordered and unorder Lists
+ * @className twui-ol
+ * @className twui-ul
+ */
+export default function List({
+    ordered,
+    items,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement> &
+    DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> & {
+        items: {
+            content: React.ReactNode | string;
+        }[];
+        ordered?: boolean;
+    }) {
+    const listContent = (
+        <>
+            {items.map((item, index) => (
+                <li key={index}>{item.content}</li>
+            ))}
+        </>
+    );
+
+    const className = "flex flex-col items-start gap-4";
+
+    if (ordered) {
+        return (
+            <ol
+                {...props}
+                className={twMerge(className, "twui-ol", props.className)}
+            >
+                {listContent}
+            </ol>
+        );
+    }
+
+    return (
+        <ul
+            {...props}
+            className={twMerge(className, "twui-ul", props.className)}
+        >
+            {listContent}
+        </ul>
+    );
+}

components/lib/layout/LoadingRectangleBlock.tsx

@@ -0,0 +1,28 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type LoadingRectangleBlockProps = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+>;
+
+/**
+ * # A loading Rectangle block
+ * @className twui-loading-rectangle-block
+ */
+export default function LoadingRectangleBlock({
+    ...props
+}: LoadingRectangleBlockProps) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex items-center w-full h-10 animate-pulse bg-slate-200 rounded",
+                "twui-loading-rectangle-block",
+                props.className
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}

components/lib/layout/Main.tsx

@@ -0,0 +1,23 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Main Wrapper
+ * @className twui-h1
+ */
+export default function Main({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
+    return (
+        <main
+            {...props}
+            className={twMerge(
+                "flex flex-col items-center w-full",
+                "twui-main",
+                props.className
+            )}
+        >
+            {props.children}
+        </main>
+    );
+}

components/lib/layout/P.tsx

@@ -0,0 +1,24 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Paragraph Tag
+ * @className twui-p | twui-paragraph
+ */
+export default function P({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
+    return (
+        <p
+            {...props}
+            className={twMerge(
+                "text-base py-4",
+                "twui-p",
+                "twui-paragraph",
+                props.className
+            )}
+        >
+            {props.children}
+        </p>
+    );
+}

components/lib/layout/Row.tsx

@@ -0,0 +1,23 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Flexbox Row
+ * @className twui-row
+ */
+export default function Row({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex flex-row items-center gap-2 flex-wrap",
+                "twui-row",
+                props.className
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}

components/lib/layout/Section.tsx

@@ -0,0 +1,24 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # General Section
+ * @className twui-section
+ */
+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",
+                "twui-section",
+                props.className
+            )}
+        >
+            {props.children}
+        </section>
+    );
+}

components/lib/layout/Span.tsx

@@ -0,0 +1,33 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Span element
+ * @className twui-span
+ */
+export default function Span({
+    size,
+    variant,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
+    size?: "normal" | "small" | "smaller" | "large" | "larger";
+    variant?: "normal" | "faded";
+}) {
+    return (
+        <span
+            {...props}
+            className={twMerge(
+                "text-base",
+                size == "small" && "text-sm",
+                size == "smaller" && "text-xs",
+                size == "large" && "text-lg",
+                size == "larger" && "text-xl",
+                variant == "faded" && "opacity-50",
+                "twui-span",
+                props.className
+            )}
+        >
+            {props.children}
+        </span>
+    );
+}

components/lib/layout/Stack.tsx

@@ -0,0 +1,23 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Flexbox Column
+ * @className twui-stack
+ */
+export default function Stack({
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "flex flex-col items-start gap-4",
+                "twui-stack",
+                props.className
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}