UX improvements (v0.0.1-alpha.2) (#13)

satelllte · Nov 14, 2023 · 13d39b2 · 13d39b2
1 parent dc1b144
commit 13d39b2
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "displacementx",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.2",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

diff --git a/src/components/pages/Generator/CanvasSection/CanvasSection.tsx b/src/components/pages/Generator/CanvasSection/CanvasSection.tsx
@@ -163,7 +163,7 @@ export function CanvasSection() {
         </output>
       </div>
       <div className='pt-1'>
-        <Switch isOn={is8k} setIsOn={onIs8kChange} textOff='4K' textOn='8K' />
+        <Switch isOn={is8k} setIsOn={onIs8kChange} labels={['4K', '8K']} />
       </div>
       <div className='flex flex-wrap gap-1 pt-3'>
         <Button disabled={isRendering} onClick={render}>

diff --git a/src/components/pages/Generator/Generator.tsx b/src/components/pages/Generator/Generator.tsx
@@ -3,11 +3,17 @@ import {GitHubLogoIcon} from '@radix-ui/react-icons';
 import {CanvasSection} from './CanvasSection';
 import {SettingsSection} from './SettingsSection';
 
+import packageJson from '../../../../package.json';
+const {version} = packageJson;
+
 export function Generator() {
   return (
     <div className='mx-auto max-w-screen-2xl'>
-      <header className='flex flex-row items-center justify-between p-4'>
-        <h1 className='select-none text-2xl sm:text-3xl'>Displacement X</h1>
+      <header className='flex flex-row items-start justify-between p-4'>
+        <div>
+          <h1 className='select-none text-2xl sm:text-3xl'>Displacement X</h1>
+          <span className='text-xs text-white/50'>{`v${version}`}</span>
+        </div>
         <Link
           className='focus-visible:outline focus-visible:outline-2 focus-visible:outline-red-700'
           href='https://github.com/satelllte/displacementx'

diff --git a/src/components/pages/Generator/SettingsSection/Group/Group.tsx b/src/components/pages/Generator/SettingsSection/Group/Group.tsx
@@ -31,12 +31,7 @@ export function Group(props: GroupProps) {
           {props.title}
         </div>
         {props.withSwitch && (
-          <Switch
-            isOn={props.enabled}
-            setIsOn={props.setEnabled}
-            textOff='Off'
-            textOn='On'
-          />
+          <Switch isOn={props.enabled} setIsOn={props.setEnabled} />
         )}
       </div>
       <div

diff --git a/src/components/pages/Generator/SettingsSection/SettingsSection.tsx b/src/components/pages/Generator/SettingsSection/SettingsSection.tsx
@@ -108,7 +108,10 @@ export function SettingsSection() {
 
   return (
     <section>
-      <SectionTitle>Settings</SectionTitle>
+      <div className='flex items-center justify-between'>
+        <SectionTitle>Settings</SectionTitle>
+        <Button onClick={randomize}>Randomize</Button>
+      </div>
       <div className='flex flex-col gap-4'>
         <Group title='Basics'>
           <SliderWrapper
@@ -286,9 +289,6 @@ export function SettingsSection() {
           />
         </Group>
       </div>
-      <div className='pt-2'>
-        <Button onClick={randomize}>Randomize</Button>
-      </div>
     </section>
   );
 }

diff --git a/src/components/ui/Switch/Switch.tsx b/src/components/ui/Switch/Switch.tsx
@@ -3,19 +3,20 @@ import clsx from 'clsx';
 import {useId} from 'react';
 
 type SwitchProps = {
-  readonly textOff: string;
-  readonly textOn: string;
   readonly isOn: boolean;
   readonly setIsOn: (checked: boolean) => void;
+  readonly labels?: [string, string];
 };
 
-export function Switch({textOff, textOn, isOn, setIsOn}: SwitchProps) {
+export function Switch({labels, isOn, setIsOn}: SwitchProps) {
   const id = useId();
   return (
     <div className='flex items-center gap-2'>
-      <Label htmlFor={id} isActive={!isOn}>
-        {textOff}
-      </Label>
+      {labels && (
+        <Label htmlFor={id} isActive={!isOn}>
+          {labels[0]}
+        </Label>
+      )}
       <RadixSwitch.Root
         id={id}
         checked={isOn}
@@ -24,9 +25,11 @@ export function Switch({textOff, textOn, isOn, setIsOn}: SwitchProps) {
       >
         <RadixSwitch.Thumb className='block h-full w-4 bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-full' />
       </RadixSwitch.Root>
-      <Label htmlFor={id} isActive={isOn}>
-        {textOn}
-      </Label>
+      {labels && (
+        <Label htmlFor={id} isActive={isOn}>
+          {labels[1]}
+        </Label>
+      )}
     </div>
   );
 }