apunkt/plano
1
0
Fork 0
mirror of https://github.com/katanemo/plano.git synced 2026-06-23 15:38:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

made changes to the dark mode. improved styles

Browse source
This commit is contained in:
Salman Paracha 2025-07-02 22:28:18 -07:00
parent fff37bd22e
commit 08f610b33d
2 changed files with 39 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

60
demos/use_cases/chatgpt-preference-model-selector/src/components/PreferenceBasedModelSelector.js
View file

@ -56,25 +56,41 @@ const Button = ({ children, variant = 'default', size = 'default', className = '
</button> </button>
); );
}; };
const Switch = ({ checked, onCheckedChange, id }) => ( const Switch = ({ checked, onCheckedChange, id }) => (
<button <div className="flex items-center gap-2">
type="button" <button
role="switch" type="button"
aria-checked={checked} role="switch"
onClick={() => onCheckedChange(!checked)} aria-checked={checked}
id={id} onClick={() => onCheckedChange(!checked)}
className={`relative inline-flex items-center h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${ id={id}
checked ? 'bg-gray-900' : 'bg-gray-300' className={`
}`} relative inline-flex items-center justify-start
> h-6 w-11 rounded-full
<span transition-colors duration-200 ease-in-out
aria-hidden="true" focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out ${ border-2 border-transparent
checked ? 'translate-x-5' : 'translate-x-0' overflow-hidden
}`} ${checked ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-600'}
/> `}
</button> >
<span
aria-hidden="true"
className={`
pointer-events-none
inline-block h-5 w-5 transform rounded-full bg-white
shadow-md ring-0 transition-transform duration-200 ease-in-out
${checked ? 'translate-x-[20px]' : 'translate-x-0'}
`}
/>
</button>
<span className="inline-block w-8 text-sm text-gray-700 dark:text-gray-300 text-center select-none">
{checked ? 'On' : 'Off'}
</span>
</div>
); );
const Label = (props) => ( const Label = (props) => (
<label {...props} className={`text-sm font-medium leading-none text-gray-700 ${props.className || ''}`} /> <label {...props} className={`text-sm font-medium leading-none text-gray-700 ${props.className || ''}`} />
); );
@ -182,11 +198,11 @@ export default function PreferenceBasedModelSelector() {
<div className="pt-4 mt-4 space-y-3 border-t border-gray-200"> <div className="pt-4 mt-4 space-y-3 border-t border-gray-200">
{preferences.map((pref) => ( {preferences.map((pref) => (
<div key={pref.id} className="grid grid-cols-[3fr_1.5fr_auto] gap-4 items-center"> <div key={pref.id} className="grid grid-cols-[3fr_1.5fr_auto] gap-4 items-center">
<Input <Input
placeholder="(e.g. generating fictional stories or poems)" placeholder="(e.g. generating fictional stories or poems)"
value={pref.usage} value={pref.usage}
onChange={(e) => updatePreference(pref.id, 'usage', e.target.value)} onChange={(e) => updatePreference(pref.id, 'usage', e.target.value)}
/> />
<select <select
value={pref.model} value={pref.model}
onChange={(e) => updatePreference(pref.id, 'model', e.target.value)} onChange={(e) => updatePreference(pref.id, 'model', e.target.value)}

2
demos/use_cases/chatgpt-preference-model-selector/src/scripts/content.js
View file

@ -68,7 +68,7 @@
} }
const label = document.createElement('span'); const label = document.createElement('span');
label.textContent = `RouteGPT preference >> ${match.usage}`; label.textContent = `RouteGPT: preference = ${match.usage}`;
label.className = 'arch-route-label'; label.className = 'arch-route-label';
label.style.fontWeight = '100'; label.style.fontWeight = '100';
label.style.fontSize = '0.85rem'; label.style.fontSize = '0.85rem';