{children}

\n}\n\nexport const Input = ({ ...props }) => {\n let sizeStyles = 'text-md px-3 py-1'\n if (props.sm || props.size == 'sm') sizeStyles = 'text-sm px-2 py-1'\n if (props.lg || props.size == 'lg') sizeStyles = 'text-lg px-3 py-2'\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm \n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 disabled:opacity-50 disabled:bg-neutral-200/70 dark:disabled:bg-neutral-800/70\n\t${sizeStyles}\n\t${props.className || ''}\n\t`\n\n return \n}\n\nexport const TextArea = ({ ...props }) => {\n const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\tplaceholder:text-neutral-500 placeholder:opacity-50 \n\t${props.className || ''}\n\t`\n\n return

\n}\n\nexport const Select = ({ ...props }) => {\n  const className = `\n\tborder-0 bg-inherit text-inherit rounded-xl shadow-sm px-3 py-2\n\tring-1 ring-inset ring-neutral-400 dark:ring-neutral-600 \n\tfocus:ring-2 focus:ring-inset focus:ring-neutral-600 dark:focus:ring-neutral-300\n\t${props.className || ''}\n\t`\n\n  return <select {...props} className={className} />\n}\n\nexport const Checkbox = ({ label, ...props }) => {\n  const className = `\n\th-4 w-4 rounded-xl bg-inherit text-neutral-700\n\tborder border-neutral-400 dark:border-neutral-600  focus:ring-neutral-700 dark:focus:ring-neutral-300 \n\txfocus:ring-0 xfocus:outline-red-500 focus:ring-offset-transparent focus:ring-offset-0\n\t${props.className || ''}\n\t`\n\n  return (\n    <div className=\"relative flex gap-x-2\">\n      <div className=\"flex  items-center\">\n        <input type=\"checkbox\" {...props} className={className} />\n      </div>\n      <div className=\"text-sm flex  items-center\">\n        <label htmlFor={props.id} className={props?.checked ? 'font-medium' : 'opacity-50'}>\n          {label}\n        </label>\n      </div>\n    </div>\n  )\n}\n\nexport const Button = ({ ...props }) => {\n  let sizeStyles = 'text-md px-3 py-1'\n  if (props.sm || props.size == 'sm') sizeStyles = 'text-sm px-2 py-1'\n  if (props.lg || props.size == 'lg') sizeStyles = 'text-lg px-4 py-2'\n  let variantStyles =\n    'bg-neutral-900 border border-transparent dark:bg-neutral-100 text-neutral-100 dark:text-neutral-900 '\n  if (props.variant === 'outline') {\n    variantStyles =\n      'bg-transparent border border-neutral-400 dark:border-neutral-600 text-neutral-900 dark:text-neutral-100'\n  }\n\n  const className = `\n\tflex flex-row justify-center items-center   rounded-xl font-semibold \n\t${variantStyles}\n\tshadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600  \n\topacity-95 hover:opacity-100 disabled:opacity-50\n\t${sizeStyles}\n\t${props.className || ''}\n\t`\n\n  if (props.href && !props.disabled) return <a {...props} className={className} />\n  return <button {...props} className={className} />\n}\n\n// export function Input(props: any) {\n//   const inputClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <input class={inputClass} {...props} />;\n// }\n\n// export function Button(props: any) {\n//   const buttonClass = \"dark:bg-white dark:text-black bg-black text-white rounded-md px-3 py-1 \";\n//   return <button class={buttonClass} {...props} />;\n// }\n\nexport function Sheet({ children, showSheet, setShowSheet }: any) {\n  return (\n    <>\n      {showSheet && (\n        <div\n          className=\"absolute top-0 left-0 w-full h-full bg-neutral-100/80 dark:bg-neutral-900/80 z-10\"\n          onClick={() => setShowSheet(false)}\n        >\n          <div className=\"absolute bottom-0 left-0 w-full bg-white dark:bg-black rounded-t-3xl pb-8\">\n            <div className=\"flex flex-col items-stretch gap-3 max-w-2xl mx-auto p-5\">{children}</div>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n\nexport function MonoButton(props: any) {\n  return (\n    <Button {...props}>\n      <div className=\"font-mono text-sm font-normal\">{props.children}</div>\n    </Button>\n  )\n}\n\nexport function MonoButtonWithStatus(props: any) {\n  const [status, setStatus] = useState<any>()\n  const handleClick = async () => {\n    try {\n      setStatus('...')\n      const result = await props.onClick?.()\n      setStatus(formatJSON(result))\n    } catch (err) {\n      console.error(err)\n      setStatus('Error: ' + err)\n    }\n  }\n\n  return (\n    <div>\n      <MonoButton {...props} onClick={handleClick} />\n      {status && <div className=\"mt-2 font-mono text-xs opacity-50 whitespace-pre-wrap break-all\">{status}</div>}\n    </div>\n  )\n}\n\nexport function Separator({ className = '' }) {\n  return <div className={`border-b border-neutral-400/25 ${className}`}></div>\n}\n\nexport function PaddedSpinner() {\n  return (\n    <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n      <LoaderCircle className=\"animate-spin\" />\n    </div>\n  )\n}\n\nexport function PaddedError({ message }) {\n  return (\n    <div className=\"flex flex-row items-center justify-center p-4 opacity-50 h-32\">\n      <div className=\"text-sm\">{message}</div>\n    </div>\n  )\n}\n\nexport function StatsRows({ stats }) {\n  return (\n    <div className=\"flex flex-col \">\n      {stats.map((stat) => (\n        <div\n          key={stat.label}\n          className=\"flex flex-row items-start justify-between gap-4 p-4 border-b border-neutral-400/10\"\n        >\n          <div className=\"opacity-50\">{stat.label}</div>\n          <div className=\"whitespace-pre-wrap text-right\">{stat.value}</div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport function Debug({ title, data, className = '' }) {\n  return (\n    <div className={className}>\n      <h3 className=\"font-semibold\">{title}</h3>\n      <pre className=\"whitespace-pre-wrap break-all text-xs\">{JSON.stringify(data, null, 2)}</pre>\n    </div>\n  )\n}\n\nexport function NavTabs({ navLinks }) {\n  return (\n    <>\n      <nav className=\"flex overflow-auto gap-6 gap-y-2 px-4\">\n        {navLinks.map(({ path, name, Icon }) => (\n          <NavLink\n            key={path}\n            to={path}\n            end\n            className={({ isActive }) =>\n              'flex flex-row items-center font-medium py-2 px-0 border-b ' +\n              (isActive ? ' border-current' : ' border-transparent opacity-50')\n            }\n          >\n            {Icon && <Icon className=\"inline size-5 mr-2\" />}\n            {name}\n          </NavLink>\n        ))}\n      </nav>\n    </>\n  )\n}\n\nexport function NavOutlet({ navLinks }) {\n  return (\n    <>\n      <NavTabs navLinks={navLinks} />\n      <Separator />\n      <Separator className=\"opacity-0\" />\n      <Outlet />\n    </>\n  )\n}\n\n//////////\n\nexport function formatJSON(json: any) {\n  return JSON.stringify(json, null, 2)\n}\n\nexport const shorten = (string, start, end) => {\n  return string.substring(0, start) + '…' + string.substring(string.length - end)\n}\n\nexport const formatAddress = (address) => {\n  if (!address) return ''\n  if (address.length < 20) return address\n  return shorten(address, 6, 4)\n}\n\nexport const formatNumber = (value) => {\n  if (value == null) return ''\n  if (value === 0) return '0'\n  if (value < 1) return parseFloat(value).toFixed(2)\n  const suffixes = ['', 'K', 'M', 'B', 'T']\n  const suffixIndex = Math.floor(Math.log10(value) / 3)\n  const shortValue = value / Math.pow(10, suffixIndex * 3)\n  return (shortValue.toFixed(1) + suffixes[suffixIndex]).replace('.0', '')\n}\n\nexport const formatNumberFull = (value) => {\n  return new Intl.NumberFormat('en-US', { notation: 'standard', maximumFractionDigits: 2 }).format(value)\n}\n\nexport function BackButton() {\n  return <ArrowLeft className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={() => (window.location.href = '/')} />\n}\n\nexport function ShareButton({ onClick }) {\n  return <Share className=\"w-5 h-5 m-2 cursor-pointer opacity-50\" onClick={onClick} />\n}\n\nexport const formatDateFull = (value) => {\n  if (!value) return ''\n  const date = new Date(value)\n  const year = date.getFullYear()\n  const month = ('0' + (date.getMonth() + 1)).slice(-2)\n  const day = ('0' + date.getDate()).slice(-2)\n  const hours = ('0' + date.getHours()).slice(-2)\n  const minutes = ('0' + date.getMinutes()).slice(-2)\n  const seconds = ('0' + date.getSeconds()).slice(-2)\n  const ampm = parseInt(hours) >= 12 ? 'PM' : 'AM'\n  const formattedHours = parseInt(hours) % 12 || 12\n  const string = `${year}-${month}-${day} @ ${formattedHours}:${minutes}:${seconds} ${ampm}`\n  return string.replace(':00 ', ' ')\n}\nexport const formatDateShort = (value) => {\n  if (!value) return ''\n  const date = new Date(value)\n  return date.toISOString().substring(0, 10)\n}\nexport const formatTime = (value) => {\n  if (!value) return ''\n  const date = new Date(value)\n  const hours = date.getUTCHours().toString().padStart(2, '0')\n  const minutes = date.getUTCMinutes().toString().padStart(2, '0')\n  return `${hours}:${minutes}` // Returns in HH:mm format\n}\nexport const formatDateRelative = (d1, d2 = new Date()) => {\n  if (!d1) return ''\n  d1 = new Date(d1)\n\n  // in miliseconds\n  const units = {\n    year: 24 * 60 * 60 * 1000 * 365,\n    month: (24 * 60 * 60 * 1000 * 365) / 12,\n    day: 24 * 60 * 60 * 1000,\n    hour: 60 * 60 * 1000,\n    minute: 60 * 1000,\n    second: 1000,\n  }\n\n  // @ts-ignore: js\n  const elapsed = d1 - d2\n\n  // \"Math.abs\" accounts for both \"past\" & \"future\" scenarios\n  for (const u in units) {\n    if (Math.abs(elapsed) > units[u] || u == 'second') {\n      const value = Math.round(elapsed / units[u])\n      const unit = u\n      const prefix = elapsed > 0 ? 'in ' : ''\n      const suffix = elapsed > 0 ? '' : ' ago'\n      return (prefix + Math.abs(value) + ' ' + unit + suffix)\n        .slice(0, -4)\n        .replace(' ', '')\n        .replace('year', 'yr')\n        .replace('month', 'mo')\n        .replace('day', 'd')\n        .replace('hour', 'h')\n        .replace('minute', 'm')\n        .replace('second', 's')\n    }\n  }\n}\n\nexport const capitalize = (s) => {\n  if (typeof s !== 'string') return ''\n  return s.charAt(0).toUpperCase() + s.slice(1)\n}\n","deleted","label",[170,171,152],"frontend","components","permalink","https://www.val.town/x/moe/gif-fc/code/frontend/components/ui.tsx","extension","actionData","errors"]
</article></body></html>