feat: gracias jarrison

app/components/Header.tsx

@@ -1,3 +1,3 @@
 export const Header = () => {
-  return <div className="bg-blue-300 w-full h-full">Hola</div>;
+  return <div className="bg-blue-300 w-full h-full">Esto es el header</div>;
 };

app/components/Nav.tsx

@@ -0,0 +1,10 @@
+import { Button } from "./common/Button";
+
+export const Nav = () => {
+  return (
+    <section className="w-full">
+      Esto es el
+      <Button>click me</Button>
+    </section>
+  );
+};

app/components/common/Button.tsx

@@ -0,0 +1,147 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { ButtonSize, HtmlType } from "../config/components/button";
+import { cn } from "../config/utils/cn";
+import { Variant } from "../config/constants/general";
+
+const Sizes: Record<ButtonSize, string> = {
+  [ButtonSize.xs]: "py-1 px-3 text-xs font-semibold h-6",
+  [ButtonSize.sm]: "py-1.5 px-4 text-sm font-semibold h-8",
+  [ButtonSize.base]: "py-2 px-8 text-sm font-semibold h-10",
+  [ButtonSize.lg]: "py-3 px-6 text-base font-semibold h-12",
+  [ButtonSize.xl]: "py-3 px-6 text-lg font-semibold h-14",
+};
+
+const Variants: Record<Variant, Array<string>> = {
+  [Variant.primary]: [
+    "rounded-full",
+    "bg-gradient-to-rb from-primary-600 via-secondary-500 to-white text-cWhite",
+    "hover:text-cBlack hover:to-100%",
+    "buttonBgTransition",
+  ],
+  [Variant.secondary]: [
+    "text-cWhite",
+    "bg-gradient-to-rb bg-gradient-to-rb from-black via-[#331e22] to-[#2c2130]",
+    "from-100% hover:from-0%",
+    "rounded-full",
+    "buttonBgTransition",
+  ],
+  [Variant.ghost]: [
+    "bg-black rounded-full relative ",
+    "before:absolute before:inset-0 before:-z-1",
+    'before:content-[""]',
+    "before:bg-gradient-to-rb before:from-primary-600/10 before:to-secondary-500/10",
+    "before:opacity-0 before:hover:opacity-100",
+    "before:rounded-full",
+    "before:transition-opacity before:duration-300",
+  ],
+  [Variant.twitch]: [
+    "rounded-full",
+    "bg-gradient-to-rb from-[#4b2a88] via-[#7b4dda] to-[#2e195c] text-cWhite",
+    "hover:to-100%",
+    "buttonBgTransition",
+  ],
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Text inside the button.
+   */
+  children: ReactNode | Array<ReactNode> | string;
+
+  /**
+   * Specify an optional className to be added to the component
+   */
+  className?: string;
+
+  /**
+   * Optional size (e.g., 'sm', 'md'), affects padding/font size.
+   */
+  size?: ButtonSize;
+
+  /**
+   * Style Variant (e.g., 'primary', 'secondary'), defines appearance.
+   */
+  variant?: Variant;
+
+  /**
+   * If true, disables user interaction.
+   */
+  isDisabled?: boolean;
+
+  /**
+   * If true, button width extends to 100%.
+   */
+  isFullWidth?: boolean;
+
+  /**
+   * HTML button type attribute ('button', 'submit', etc.).
+   */
+  htmlType?: HtmlType;
+
+  /**
+   * If true, adds a gradient border.
+   */
+  hasBorder?: boolean;
+
+  /**
+   * Optional className to be added to the inner button element.
+   */
+  innerClassName?: string;
+
+  /**
+   * Function to call on button click.
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Button = ({
+  children,
+  className,
+  onClick = () => {},
+  size = ButtonSize.base,
+  variant = Variant.primary,
+  isDisabled = false,
+  hasBorder = false,
+  innerClassName,
+  htmlType = HtmlType.button,
+  isFullWidth = false,
+  ...restOfProps
+}: ButtonProps) => {
+  const classes = {
+    container: cn(
+      "relative z-1",
+      "disabled:opacity-30 disabled:pointer-events-none",
+      "transition-all duration-300",
+      Sizes[size],
+      ...(!hasBorder ? Variants[variant] : []),
+      {
+        "w-full": isFullWidth,
+        "h-fit w-fit rounded-full bg-gradient-to-rb from-primary-600 to-secondary-500 p-px buttonBgTransitionReset":
+          hasBorder,
+      },
+      className
+    ),
+    innerContainer: cn(
+      Variants[variant],
+      Sizes[size],
+      "inline-block transition-all duration-300 ease-in-out w-full h-full",
+      innerClassName
+    ),
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isDisabled}
+      type={htmlType}
+      className={classes.container}
+      {...restOfProps}
+    >
+      {hasBorder ? (
+        <span className={classes.innerContainer}>{children}</span>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};

app/components/config/components/button.ts

@@ -0,0 +1,13 @@
+export enum ButtonSize {
+  xs = "xs",
+  sm = "sm",
+  base = "base",
+  lg = "lg",
+  xl = "xl",
+}
+
+export enum HtmlType {
+  button = "button",
+  reset = "reset",
+  submit = "submit",
+}

app/components/config/constants/general.ts

@@ -0,0 +1,6 @@
+export enum Variant {
+  primary = "primary",
+  secondary = "secondary",
+  ghost = "ghost",
+  twitch = "twitch",
+}

app/components/config/utils/cn.ts

@@ -0,0 +1,18 @@
+import { ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Combines and merges Tailwind/UNO CSS classes using twMerge and clsx utility functions.
+ * twMerge is used to handle conflicts between classes effectively.
+ *
+ * @param {...ClassValue} inputs - An array of class values to be combined and merged.
+ * @returns {string} - The merged and combined class names as a string.
+ */
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
+
+/**
+ * Source:
+ * Tailwind merge: https://github.com/dcastil/tailwind-merge/tree/v1.14.0
+ */

app/shared-space.tsx

@@ -6,6 +6,7 @@ import { useCursors } from "./cursors-context";
 import OtherCursor from "./other-cursor";
 import SelfCursor from "./self-cursor";
 import { Header } from "./components/Header";
+import { Nav } from "./components/Nav";
 
 export default function SharedSpace() {
   const { others, self } = useCursors();
@@ -50,14 +51,8 @@ export default function SharedSpace() {
           </div>
         )}
       </div>
-      <div className="max-w-6xl mx-auto w-full min-h-screen">
-        <Header />
-        <Header />
-        <Header />
-        <Header />
-        <Header />
-        <Header />
-        <Header />
+      <div className="max-w-5xl mx-auto w-full min-h-screen">
+        <Nav />
         <Header />
       </div>
 

package.json

@@ -9,20 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "next": "14.2.5",
+    "partysocket": "1.0.1",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.5",
-    "partysocket": "1.0.1"
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
-    "partykit": "0.0.107"
+    "partykit": "0.0.107",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

tsconfig.json

@@ -19,12 +19,14 @@
       {
         "name": "next"
       }
-
     ],
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["/app/*"],
+      "@/common/*": ["/app/components/common/*"],
+      "@/config/*": ["/app/components/config/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
-}
+}