Minor clsx adjustments (#1083)

vercel · Jul 17, 2023 · 650c9a4 · 650c9a4
1 parent c8af238
commit 650c9a4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -33,7 +33,7 @@ const inter = Inter({
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
+      <body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
         <Navbar />
         <Suspense>
           <main>{children}</main>

diff --git a/components/label.tsx b/components/label.tsx
@@ -16,19 +16,17 @@ const Label = ({
 }) => {
   return (
     <div
-      className={clsx(
-        'absolute bottom-0 left-0 flex w-full',
-        position === 'center'
-          ? 'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]'
-          : size === 'large'
-          ? 'px-4 pb-4 md:px-8 md:pb-8'
-          : 'px-4 pb-4'
-      )}
+      className={clsx('absolute bottom-0 left-0 flex w-full px-4 pb-4', {
+        'px-4 pb-4 md:px-8 md:pb-8 lg:px-20 lg:pb-[35%]': position === 'center',
+        'px-4 pb-4 md:px-8 md:pb-8': size === 'large'
+      })}
     >
       <div
         className={clsx(
-          'flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
-          size === 'large' ? 'text-sm' : 'text-xs'
+          'flex items-center rounded-full border bg-white/80 p-1 text-xs text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
+          {
+            'text-sm': size === 'large'
+          }
         )}
       >
         <h3

diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import clsx from 'clsx';
 import { GridTileImage } from 'components/grid/tile';
 import Image from 'next/image';
 import { useState } from 'react';
@@ -64,7 +63,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
               <button
                 aria-label="Enlarge product image"
                 key={image.src}
-                className={clsx('h-auto w-20')}
+                className="h-auto w-20"
                 onClick={() => setCurrentImage(index)}
               >
                 <GridTileImage