chore: minor refactor

packages/example-nextjs14/src/app/Status.tsx

@@ -1,4 +1,6 @@
 'use client';
+
+import clsx from 'clsx';
 import React from 'react';
 import { form } from 'shared/form';
 import { useUrlState } from 'state-in-url/next';
@@ -20,17 +22,15 @@ export const Status = React.memo(({
   });
 
   return (
-    <div className={`flex relative shadow-md hover:shadow-lg ${className} `}>
+    <div className={clsx("flex relative shadow-md hover:shadow-lg", className)}>
       <div className="font-semibold mb-2 ">
         Other client component
       </div>
       <h3>Types and structure of data are presered</h3>
 
       <div className="flex-none">
         <pre
-          className="h-[330px] text-sm overflow-y-scroll
-         text-gray-600 bg-white p-4 rounded-md shadow-inner
-          break-all whitespace-pre-wrap"
+          className="h-[330px] text-sm overflow-y-scroll text-gray-600 bg-white p-4 rounded-md shadow-inner break-all whitespace-pre-wrap"
           data-testid="parsed"
         >
           <div>{'{'}</div>

packages/example-nextjs14/src/app/components/GithubLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import clsx from 'clsx'
 
 export const GithubLink = (
   props: React.DetailedHTMLProps<
@@ -13,11 +14,7 @@ export const GithubLink = (
       href="https://github.com/asmyshlyaev177/state-in-url"
       target="_blank"
       rel="noopener"
-      className={`inline-flex items-center px-4 py-2 border
-             border-transparent text-sm font-medium rounded-md
-              text-white bg-gray-800 hover:bg-gray-700
-               focus:outline-none focus:ring-2 focus:ring-offset-2
-                focus:ring-gray-500 ${className}`}
+      className={clsx("inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500", className)}
       {...rest}
     >
       <svg

packages/example-nextjs14/src/app/components/Logo.tsx

@@ -1,12 +1,12 @@
 import Image from 'next/image';
 
-export const Logo = (props: { className: string }) => (
+export const Logo = ({ className }: { className: string }) => (
   <Image
     src="/Logo_symbol.png"
     alt="Logo"
     width="150"
     height="150"
-    className={props.className}
+    className={className}
     quality={1}
     priority={true}
     sizes="150px"

packages/example-nextjs14/src/app/components/SourceCodeBtn.tsx

@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 export const SourceCodeBtn = ({
   href,
   className,
@@ -10,7 +12,7 @@ export const SourceCodeBtn = ({
       <a
         href={href}
         rel="noopener nofollow"
-        className={`inline-flex p-2 flex-nowrap justify-between items-center px-3 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700`}
+        className={"inline-flex p-2 flex-nowrap justify-between items-center px-3 text-xs font-medium text-gray-900 bg-white border border-gray-200 rounded-lg focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"}
         target="_blank"
       >
         <svg

packages/example-nextjs14/src/app/components/Tabs.tsx

@@ -1,5 +1,7 @@
 'use client'
+
 import Link from 'next/link'
+import clsx from 'clsx';
 import { usePathname, useRouter } from 'next/navigation'
 
 
@@ -24,9 +26,8 @@ export const Tabs = ({ entries, className = '' }: { entries: { text: string, url
       <ul className="text-sm font-medium text-center rounded-lg shadow flex flex-nowrap divide-gray-700 text-gray-400">
         {entries.map((en, ind, arr) => (
           <li key={en.text}>
-            <Link href={en.url} scroll={scroll} className={`max-sm:hidden w-full self-stretch focus-within:z-10`}>
-              <span className={`transition ${pathname === en.url && 'bg-orange-700 font-bold hover:bg-orange-600' || 'bg-gray-700 hover:bg-gray-800'} h-full justify-stretch inline-flex items-center w-full
-            transition sm:text-nowrap p-4 ${ind === 0 && 'rounded-s-lg' || ''} ${ind !== 0 && ind !== arr.length - 1 && 'border-r' || ''} ${ind === arr.length - 1 && 'border-s-0 rounded-e-lg' || ''}  border-gray-700 focus:ring-4 focus:ring-blue-300 active focus:outline-none  text-white`} aria-current="page">{en.text}</span>
+            <Link href={en.url} scroll={scroll} className="max-sm:hidden w-full self-stretch focus-within:z-10">
+              <span className={clsx("transition", pathname === en.url && "bg-orange-700 font-bold hover:bg-orange-600" || "bg-gray-700 hover:bg-gray-800", "h-full justify-stretch inline-flex items-center w-full transition sm:text-nowrap p-4", ind === 0 && 'rounded-s-lg' || '', ind !== 0 && ind !== arr.length - 1 && 'border-r' || '', ind === arr.length - 1 && 'border-s-0 rounded-e-lg' || '', "border-gray-700 focus:ring-4 focus:ring-blue-300 active focus:outline-none  text-white")} aria-current="page">{en.text}</span>
             </Link>
           </li>
 

packages/example-nextjs14/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import { Analytics } from '@vercel/analytics/react';
 import { Roboto } from 'next/font/google';
 import { GoogleAnalytics } from '@next/third-parties/google'
+import Script from 'next/script'
 
 import { metadata as _metadata } from './seoStuff';
 import { isVercel, vercelUrl } from './domain';
@@ -25,9 +26,11 @@ export default async function RootLayout({
 
       {isVercel && <link rel="canonical" href={vercelUrl}></link>}
       <meta name="google-site-verification" content="NKunqTB4Sd_Bp6zoIbzKvw_WoGB-v2-MXxC5mbKJKJw" />
+
       <body className={`${roboto.className}`}>
         {children}
       </body>
+
       {isProd ? <GoogleAnalytics gaId="G-5N8Y565DXK" /> : null }
       {isProd && isVercel ? <Analytics /> : null}
     </html>

packages/shared/components/Field.tsx

@@ -15,7 +15,7 @@ export const Field = ({
   return (
     <div
       className={clsx(
-        `block text-sm font-medium text-gray-700 mb-1 whitespace-nowrap`,
+        "block text-sm font-medium text-gray-700 mb-1 whitespace-nowrap",
         className,
       )}
     >

packages/shared/components/Input.tsx

@@ -1,8 +1,13 @@
+import clsx from "clsx";
+
 export const Input = ({ value, className, ...props }: InputProps) => {
   return (
     <input
-      className={`px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500
-s ${className} ${props.type === "checkbox" ? "w-6 h-6 cursor-pointer" : "w-full"}`}
+      className={clsx(
+        "px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-orange-500 focus:border-orange-500",
+        className,
+        props.type === "checkbox" ? "w-6 h-6 cursor-pointer" : "w-full",
+      )}
       value={value ?? ""}
       {...props}
     />

packages/shared/components/Refresh.tsx

@@ -10,7 +10,7 @@ export const RefreshButton = React.memo(
           window.location.reload();
         }}
         className={clsx(
-          `transition font-extrabold bg-orange-700 text-lg text-white`,
+          "transition font-extrabold bg-orange-700 text-lg text-white",
           className,
         )}
         name="Reload page"