From 3e69fb6c2d14fcf9091a5606544b96ddd100d352 Mon Sep 17 00:00:00 2001 From: Salman Paracha Date: Thu, 3 Jul 2025 15:38:13 -0700 Subject: [PATCH] added dark mode --- .../public/index.html | 22 ++--- .../public/init-theme.js | 9 ++ .../src/App.js | 32 +++---- .../PreferenceBasedModelSelector.js | 83 +++++++++++++++---- .../tailwind.config.js | 2 + 5 files changed, 107 insertions(+), 41 deletions(-) create mode 100644 demos/use_cases/chatgpt-preference-model-selector/public/init-theme.js diff --git a/demos/use_cases/chatgpt-preference-model-selector/public/index.html b/demos/use_cases/chatgpt-preference-model-selector/public/index.html index 8c778560..1ab8c793 100644 --- a/demos/use_cases/chatgpt-preference-model-selector/public/index.html +++ b/demos/use_cases/chatgpt-preference-model-selector/public/index.html @@ -1,17 +1,17 @@ - - - - - - React App - - + + + + + + + + + RouteGPT + +
diff --git a/demos/use_cases/chatgpt-preference-model-selector/public/init-theme.js b/demos/use_cases/chatgpt-preference-model-selector/public/init-theme.js new file mode 100644 index 00000000..1c52039c --- /dev/null +++ b/demos/use_cases/chatgpt-preference-model-selector/public/init-theme.js @@ -0,0 +1,9 @@ +// Apply dark mode based on system preference +if ( + localStorage.theme === 'dark' || + (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches) +) { + document.documentElement.classList.add('dark'); +} else { + document.documentElement.classList.remove('dark'); +} diff --git a/demos/use_cases/chatgpt-preference-model-selector/src/App.js b/demos/use_cases/chatgpt-preference-model-selector/src/App.js index 41d12fde..7cb320b0 100644 --- a/demos/use_cases/chatgpt-preference-model-selector/src/App.js +++ b/demos/use_cases/chatgpt-preference-model-selector/src/App.js @@ -3,24 +3,24 @@ import PreferenceBasedModelSelector from './components/PreferenceBasedModelSelec export default function App() { return ( -
+
-
-
- RouteGPT Logo -

RouteGPT

+
+
+ RouteGPT Logo +

RouteGPT

+
+

+ Dynamically route to GPT models based on usage preferences. +

+ + powered by Arch Router +
-

- Dynamically route to GPT models based on usage preferences. -

- - powered by Arch Router - -
diff --git a/demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js b/demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js index 115940e0..bd35e1d8 100644 --- a/demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js +++ b/demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js @@ -31,27 +31,74 @@ const PlusCircle = ({ className }) => ( // --- Mocked UI Components --- const Card = ({ children, className = '' }) => ( -
{children}
+
+ {children} +
); + const CardContent = ({ children, className = '' }) => ( -
{children}
+
+ {children} +
); + const Input = (props) => ( ); + const Button = ({ children, variant = 'default', size = 'default', className = '', ...props }) => { - const baseClasses = 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2'; + const baseClasses = ` + inline-flex items-center justify-center + rounded-md text-sm font-medium + transition-colors + focus:outline-none focus:ring-2 focus:ring-offset-2 + `; + const variantClasses = { - default: 'bg-gray-900 text-white hover:bg-gray-800 focus:ring-gray-900', - outline: 'border border-gray-300 bg-transparent hover:bg-gray-100 focus:ring-gray-400', - ghost: 'hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-400' + default: ` + bg-gray-900 text-white + hover:bg-gray-800 + focus:ring-gray-900 + `, + outline: ` + border border-gray-300 dark:border-gray-600 + bg-transparent + text-gray-800 dark:text-white + hover:bg-gray-100 dark:hover:bg-gray-700 + focus:ring-blue-500 + focus:ring-offset-2 + dark:focus:ring-offset-gray-900 + `, + ghost: ` + text-gray-800 dark:text-gray-200 + hover:bg-gray-100 dark:hover:bg-gray-700 + focus:ring-gray-400 + ` }; - const sizeClasses = { default: 'h-9 px-3', icon: 'h-9 w-9' }; + + const sizeClasses = { + default: 'h-9 px-3', + icon: 'h-9 w-9' + }; + return ( - ); @@ -186,7 +233,7 @@ export default function PreferenceBasedModelSelector() { }; return ( -
+
@@ -195,7 +242,7 @@ export default function PreferenceBasedModelSelector() {
{routingEnabled && ( -
+
{preferences.map((pref) => (
updatePreference(pref.id, 'model', e.target.value)} - className="h-9 w-full px-3 text-sm bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" + className="h-9 w-full px-3 text-sm + bg-white dark:bg-gray-700 + text-gray-800 dark:text-white + border border-gray-300 dark:border-gray-600 + rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" >