Docs: Revamp extensions site (#1260)

Co-authored-by: Nahiyan Khan <nahiyan@squareup.com>

documentation/src/components/ui/badge.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+interface BadgeProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: "default" | "secondary";
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  className = "",
+  variant = "default",
+}) => {
+  const baseStyles =
+    "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium";
+  const variantStyles = {
+    default: "bg-purple-100 text-purple-800",
+    secondary: "bg-gray-100 text-gray-800",
+  };
+
+  return (
+    <span className={`${baseStyles} ${variantStyles[variant]} ${className}`}>
+      {children}
+    </span>
+  );
+};

documentation/src/components/ui/button.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "default" | "ghost" | "link";
+  size?: "default" | "icon";
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  className = "",
+  variant = "default",
+  size = "default",
+  ...props
+}) => {
+  const baseStyles =
+    "flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent dark:focus:ring-offset-gray-900";
+  const variantStyles = {
+    default:
+      "bg-black dark:bg-white text-white dark:text-black hover:bg-accent/90 dark:hover:bg-accent/80",
+    ghost:
+      "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300",
+    link: "bg-transparent text-accent hover:underline hover:text-textProminent dark:text-accent/90",
+  };
+  const sizeStyles = {
+    default: "px-6 py-3",
+    icon: "p-2",
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};

documentation/src/components/ui/card.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+export const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  return (
+    <div
+      className={`bg-bgApp p-4 rounded-2xl border border-borderSubtle
+       ${className}`}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  return (
+    <div className={`text-[18px] leading-[24px] mb-2 ${className}`} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className = "",
+  ...props
+}) => {
+  return (
+    <div className={`${className}`} {...props}>
+      {children}
+    </div>
+  );
+};

documentation/src/components/ui/input.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input: React.FC<InputProps> = ({ className = "", ...props }) => {
+  return (
+    <input
+      className={`bg-bgApp font-light text-textProminent placeholder-textPlaceholder w-full px-3 py-3 text-[40px] leading-[52px] border-b border-borderSubtle focus:outline-none focus:ring-purple-500 focus:border-borderProminent caret-[#FF4F00] ${className}`}
+      {...props}
+    />
+  );
+};