better classes

birdflop · Dec 27, 2023 · 3df38ec · 3df38ec
1 parent 4fd7827
commit 3df38ec
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 26 deletions.
diff --git a/src/components/elements/Button.tsx b/src/components/elements/Button.tsx
@@ -21,7 +21,7 @@ export const Button = component$(({ color, small, big, massive, bold, extraClass
       'text-base px-8 py-4 rounded-xl gap-4': massive,
       'font-bold': bold,
       'text-base px-4 py-2 rounded-md gap-3': !small && !big && !massive,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}>
       <Slot />
     </button>
@@ -39,7 +39,7 @@ export const SPAButton = component$(({ color, small, big, massive, bold, extraCl
       'text-base px-8 py-4 rounded-xl': massive,
       'font-bold': bold,
       'text-base px-4 py-2 rounded-md': !small && !big && !massive,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}>
       <Slot />
     </Link>
@@ -57,7 +57,7 @@ export const ExternalButton = component$(({ color, small, big, massive, bold, ex
       'text-base px-8 py-4 rounded-xl': massive,
       'font-bold': bold,
       'text-base px-4 py-2 rounded-md': !small && !big && !massive,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}>
       <Slot />
     </a>

diff --git a/src/components/elements/OutputField.tsx b/src/components/elements/OutputField.tsx
@@ -6,7 +6,10 @@ export default component$(({ extraClass, ...props }: any) => {
       <label for={props.id} class="mb-2">
         <Slot />
       </label>
-      <RawOutputField {...props} extraClass={`mb-3 ${extraClass}`} />
+      <RawOutputField {...props} extraClass={{
+        'mb-3': true,
+        ...extraClass,
+      }} />
     </div>
   );
 });
@@ -16,7 +19,10 @@ export const RawOutputField = component$(({ id, value, charlimit, extraClass }:
     alerts: [],
   }, { deep: true });
   return <>
-    <textarea class={`transition ease-in-out cursor-pointer text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 break-words ${extraClass}`} id={id} value={value} onClick$={(event: any) => {
+    <textarea class={{
+      'transition ease-in-out cursor-pointer text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 break-words': true,
+      ...extraClass,
+    }} id={id} value={value} onClick$={(event: any) => {
       navigator.clipboard.writeText(event.target!.value);
       const alert = {
         class: 'text-green-500',

diff --git a/src/components/elements/SelectInput.tsx b/src/components/elements/SelectInput.tsx
@@ -18,7 +18,7 @@ export const RawSelectInput = component$(({ transparent, extraClass, ...props }:
     <select {...props} class={{
       'transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-2 py-3': true,
       'border-0 bg-transparent': transparent,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}>
       <Slot />
     </select>

diff --git a/src/components/elements/TextInput.tsx b/src/components/elements/TextInput.tsx
@@ -18,7 +18,7 @@ export const RawTextInput = component$(({ extraClass, ...props }: any) => {
   return (
     <input {...props} class={{
       'transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2': true,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}/>
   );
 });
@@ -27,7 +27,7 @@ export const RawTextAreaInput = component$(({ extraClass, ...props }: any) => {
   return (
     <textarea {...props} class={{
       'transition ease-in-out text-lg border border-gray-700 bg-gray-800 text-gray-50 hover:bg-gray-700 focus:bg-gray-700 rounded-md px-3 py-2 resize-y w-full h-32': true,
-      [extraClass]: !!extraClass,
+      ...extraClass,
     }}/>
   );
 });
diff --git a/src/components/icons/LoadingIcon.tsx b/src/components/icons/LoadingIcon.tsx
@@ -2,7 +2,10 @@ import { component$ } from '@builder.io/qwik';
 
 export default component$(({ extraClass }: any) => {
   return (
-    <svg class={`animate-spin ml-2 h-5 w-5 text-white ${extraClass}`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <svg class={{
+      'animate-spin ml-2 h-5 w-5 text-white': true,
+      ...extraClass,
+    }} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
       <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
       <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>

diff --git a/src/global.css b/src/global.css
@@ -67,15 +67,11 @@ main {
   font-weight: bold;
 }
 
-.font-underline {
-  text-decoration-line: underline;
-}
-
-.font-strikethrough {
+.strikethrough {
   text-decoration-line: line-through;
 }
 
-.font-underline-strikethrough {
+.underline-strikethrough {
   text-decoration-line: underline line-through;
 }
 

diff --git a/src/routes/animpreview/index.tsx b/src/routes/animpreview/index.tsx
@@ -82,7 +82,14 @@ export default component$(() => {
               let result: any = string.match(pattern);
               result = result.filter((obj: string) => { return obj; });
               return (
-                <span key={`char${i}`} style={{ color: result[1] }} class={`font${result.includes('&n') ? '-underline' : ''}${result.includes('&m') ? '-strikethrough' : ''} font${result.includes('&l') ? '-bold' : ''}${result.includes('&o') ? '-italic' : ''}`} >
+                <span key={`char${i}`} style={{ color: result[1] }} class={{
+                  'underline': result.includes('&n'),
+                  'strikethrough': result.includes('&m'),
+                  'underline-strikethrough': result.includes('&n') && result.includes('&m'),
+                  'font-bold': result.includes('&l'),
+                  'font-italic': result.includes('&o'),
+                  'font-bold-italic': result.includes('&l') && result.includes('&o'),
+                }}>
                   {result[result.length - 1]}
                 </span>
               );

diff --git a/src/routes/animtab/index.tsx b/src/routes/animtab/index.tsx
@@ -161,7 +161,12 @@ export default component$(() => {
           </span>
         </OutputField>
 
-        <h1 class={`text-4xl sm:text-6xl my-6 break-all max-w-7xl -space-x-[1px] font${store.bold ? '-bold' : ''}${store.italic ? '-italic' : ''}`}>
+        <h1 class={{
+          'text-4xl sm:text-6xl my-6 break-all max-w-7xl -space-x-[1px]': true,
+          'font-bold': store.bold,
+          'font-italic': store.italic,
+          'font-bold-italic': store.bold && store.italic,
+        }}>
           {(() => {
             const text = store.text != '' ? store.text : 'SimplyMC';
 
@@ -170,7 +175,11 @@ export default component$(() => {
             if (!colors) return;
 
             return text.split('').map((char: string, i: number) => (
-              <span key={`char${i}`} style={`color: #${colors[i] ?? colors[i - 1] ?? colors[0]};`} class={`font${store.underline ? '-underline' : ''}${store.strikethrough ? '-strikethrough' : ''}`}>
+              <span key={`char${i}`} style={`color: #${colors[i] ?? colors[i - 1] ?? colors[0]};`} class={{
+                'underline': store.underline,
+                'strikethrough': store.strikethrough,
+                'underline-strikethrough': store.underline && store.strikethrough,
+              }}>
                 {char}
               </span>
             ));
@@ -294,7 +303,7 @@ export default component$(() => {
               </TextInput>
 
               <div class="flex flex-col md:grid grid-cols-2 gap-2">
-                <NumberInput id="speed" input value={store.speed} extraClass="w-full" step={50} min={50} onInput$={(event: any) => { store.speed = Number(event.target!.value); setCookie(JSON.stringify(store)); }} onIncrement$={() => { store.speed = Number(store.speed) + 50; setCookie(JSON.stringify(store)); }} onDecrement$={() => { store.speed = Number(store.speed) - 50; setCookie(JSON.stringify(store)); }}>
+                <NumberInput id="speed" input value={store.speed} extraClass={{ 'w-full': true }} step={50} min={50} onInput$={(event: any) => { store.speed = Number(event.target!.value); setCookie(JSON.stringify(store)); }} onIncrement$={() => { store.speed = Number(store.speed) + 50; setCookie(JSON.stringify(store)); }} onDecrement$={() => { store.speed = Number(store.speed) - 50; setCookie(JSON.stringify(store)); }}>
                   {t('animtab.speed@@Speed')}
                 </NumberInput>
 

diff --git a/src/routes/animtexture/index.tsx b/src/routes/animtexture/index.tsx
@@ -78,15 +78,15 @@ export default component$(() => {
           ))}
         </div>
 
-        <TextInput id="textureName" extraClass="mb-3" value={store.textureName} onInput$={(event: any) => { store.textureName = event.target!.value; }}>
+        <TextInput id="textureName" extraClass={{ 'mb-3': true }} value={store.textureName} onInput$={(event: any) => { store.textureName = event.target!.value; }}>
           {t('animtexture.textureName@@Texture Name')}
         </TextInput>
 
         <Toggle id="Cumulative" checked={store.cumulative} onChange$={(event: any) => { store.cumulative = event.target.checked; }}>
           {t('animtexture.cumulative@@Cumulative (Turn this on if gif frames are broken)')}
         </Toggle>
 
-        <Button extraClass="my-6" onClick$={
+        <Button extraClass={{ 'my-6': true }} onClick$={
           () => {
             const canvas: any = document.getElementById('c')!;
             canvas.classList.add('sm:flex');
@@ -138,7 +138,7 @@ export default component$(() => {
 
         <div id="links" class="hidden">
           <p class="mb-4">Animated Texture Generated Successfully!</p>
-          <ExternalButton id="pngd" extraClass="mr-2" href='/'>
+          <ExternalButton id="pngd" extraClass={{ 'mr-2': true }} href='/'>
             {t('animtexture.downloadPNG@@Download PNG')}
           </ExternalButton>
           <ExternalButton id="mcmeta" target="_blank" href='data:text/plain;charset=utf-8,{"animation":{}}'>

diff --git a/src/routes/colorstrip/index.tsx b/src/routes/colorstrip/index.tsx
@@ -26,7 +26,7 @@ export default component$(() => {
           {t('colorstrip.subtitle@@Strips all color / format codes from text')}
         </h2>
 
-        <TextInput extraClass="mb-3" id="input" onInput$={(event: any) => { store.input = event.target!.value; }}>
+        <TextInput extraClass={{ 'mb-3': true }} id="input" onInput$={(event: any) => { store.input = event.target!.value; }}>
           {t('colorstrip.inputText@@Input Text')}
         </TextInput>
 

diff --git a/src/routes/gradients/index.tsx b/src/routes/gradients/index.tsx
@@ -115,7 +115,12 @@ export default component$(() => {
           </span>
         </OutputField>
 
-        <h1 class={`text-4xl sm:text-6xl my-6 break-all max-w-7xl -space-x-[1px] font${store.bold ? '-bold' : ''}${store.italic ? '-italic' : ''}`}>
+        <h1 class={{
+          'text-4xl sm:text-6xl my-6 break-all max-w-7xl -space-x-[1px]': true,
+          'font-bold': store.bold,
+          'font-italic': store.italic,
+          'font-bold-italic': store.bold && store.italic,
+        }}>
           {(() => {
             const text = store.text ? store.text : 'SimplyMC';
 
@@ -128,7 +133,11 @@ export default component$(() => {
             return text.split('').map((char: string, i: number) => {
               if (char != ' ') hex = convertToHex(gradient.next());
               return (
-                <span key={`char${i}`} style={`color: #${hex};`} class={`font${store.underline ? '-underline' : ''}${store.strikethrough ? '-strikethrough' : ''}`}>
+                <span key={`char${i}`} style={`color: #${hex};`} class={{
+                  'underline': store.underline,
+                  'strikethrough': store.strikethrough,
+                  'underline-strikethrough': store.underline && store.strikethrough,
+                }}>
                   {char}
                 </span>
               );

diff --git a/src/routes/presettools/index.tsx b/src/routes/presettools/index.tsx
@@ -33,7 +33,7 @@ export default component$(() => {
         <div class="mt-3">
           <OutputField id="Output" value={
             JSON.stringify(loadPreset(store.preset), null, 2)
-          } extraClass="h-96">
+          } extraClass={{ 'h-96': true }}>
             {t('presettools.output@@Output')}
           </OutputField>
         </div>