[{"data":1,"prerenderedAt":6},["ShallowReactive",2],{"tux-codeblock:text:github-light:p9ucfh":3,"tux-codeblock:text:github-light:qvu5ug":4,"tux-codeblock:text:github-light:-3rje18":5},"\u003Cpre>\u003Ccode>@tti:registry=https:\u002F\u002Fcode.tti.tamu.edu\u002Fapi\u002Fpackages\u002Ftti\u002Fnpm\u002F\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre>\u003Ccode>npm install @tti\u002Ftti-ux-react react react-dom\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre>\u003Ccode>import React from \"react\";\nimport {\n  TuxButton,\n  TuxBadge,\n  TuxAlert,\n  TuxCard,\n  TuxBigStat,\n  useTuxTheme\n} from \"@tti\u002Ftti-ux-react\";\nimport \"@tti\u002Ftti-ux-react\u002Fstyles.css\"; \u002F\u002F Canonical tokens + WCAG AAA reset\n\nexport default function Dashboard() {\n  const { theme, toggleTheme } = useTuxTheme();\n\n  return (\n    <div className=\"p-8 space-y-6\">\n      <div className=\"flex justify-between items-center\">\n        <h1 className=\"text-2xl font-bold\">Research Dashboard<\u002Fh1>\n        <TuxButton\n          shape=\"sharp\"\n          intent=\"secondary\"\n          size=\"sm\"\n          onClick={toggleTheme}\n        >\n          Theme: {theme}\n        <\u002FTuxButton>\n      <\u002Fdiv>\n\n      <TuxAlert variant=\"info\" title=\"System Status\">\n        All telemetry feeds are operating under WCAG 2.2 Level AAA compliance.\n      <\u002FTuxAlert>\n\n      <TuxCard padded>\n        <div className=\"flex items-center justify-between\">\n          <TuxBigStat\n            value=\"126\"\n            suffix=\"M\"\n            label=\"Annual research expenditure\"\n            tone=\"maroon\"\n          \u002F>\n          <TuxBadge tier=\"restricted\" variant=\"solid\">Restricted<\u002FTuxBadge>\n        <\u002Fdiv>\n      <\u002FTuxCard>\n    <\u002Fdiv>\n  );\n}\u003C\u002Fcode>\u003C\u002Fpre>",1792775680830]