make examples more fancy

Author: ewgenius

apps/example/app/custom/page.tsx

@@ -19,10 +19,12 @@ export default async function CustomExample() {
       <div className="flex flex-wrap gap-1 pb-2">
         <ThemeButton
           theme="light"
+          bg="bg-geist-background"
           className="border-geist-accents-2 hover:border-geist-accents-3 bg-geist-accents-1 hover:bg-geist-accents-2 active:bg-geist-accents-3"
         />
         <ThemeButton
           theme="dark"
+          bg="bg-geist-background"
           className="border-geist-accents-2 hover:border-geist-accents-3 bg-geist-accents-1 hover:bg-geist-accents-2 active:bg-geist-accents-3"
         />
       </div>

apps/example/app/radix-colors/page.tsx

@@ -19,18 +19,22 @@ export default async function CustomExample() {
       <div className="flex flex-wrap gap-1 pb-2">
         <ThemeButton
           theme="gray-light"
+          bg="bg-primary-1"
           className="border-primary-7 hover:border-primary-8 bg-primary-3 hover:bg-primary-4 active:bg-primary-5"
         />
         <ThemeButton
           theme="gray-dark"
+          bg="bg-primary-1"
           className="border-primary-7 hover:border-primary-8 bg-primary-3 hover:bg-primary-4 active:bg-primary-5"
         />
         <ThemeButton
           theme="amber-light"
+          bg="bg-primary-1"
           className="border-primary-7 hover:border-primary-8 bg-primary-3 hover:bg-primary-4 active:bg-primary-5"
         />
         <ThemeButton
           theme="amber-dark"
+          bg="bg-primary-1"
           className="border-primary-7 hover:border-primary-8 bg-primary-3 hover:bg-primary-4 active:bg-primary-5"
         />
       </div>

apps/example/app/tailwind-colors/page.tsx

@@ -19,18 +19,22 @@ export default async function CustomExample() {
       <div className="flex flex-wrap gap-1 pb-2">
         <ThemeButton
           theme="gray-light"
+          bg="bg-primary-100"
           className="border-primary-300 hover:border-primary-400 bg-primary-100 hover:bg-primary-200 active:bg-primary-300"
         />
         <ThemeButton
           theme="gray-dark"
+          bg="bg-primary-100"
           className="border-primary-300 hover:border-primary-400 bg-primary-100 hover:bg-primary-200 active:bg-primary-300"
         />
         <ThemeButton
           theme="amber-light"
+          bg="bg-primary-100"
           className="border-primary-300 hover:border-primary-400 bg-primary-100 hover:bg-primary-200 active:bg-primary-300"
         />
         <ThemeButton
           theme="amber-dark"
+          bg="bg-primary-100"
           className="border-primary-300 hover:border-primary-400 bg-primary-100 hover:bg-primary-200 active:bg-primary-300"
         />
       </div>

apps/example/components/ColorCard.tsx

@@ -4,7 +4,11 @@ export const ColorCard: FC<{
   className: string;
 }> = ({ className }) => (
   <div className="flex gap-2 items-center">
-    <div className={`rounded shadow w-8 h-8 ${className}`}></div>
+    <div
+      className={`rounded-xl relative overflow-hidden w-8 h-8 shadow hover:shadow-lg hover:scale-110 transition-all duration-300 cursor-pointer`}
+    >
+      <div className={`${className} absolute inset-0 shadow-inner`} />
+    </div>
     {className}
   </div>
 );

apps/example/components/ExampleLayout.tsx

@@ -9,24 +9,26 @@ export const ExampleLayout: FC<
   }>
 > = ({ title, subtitle, children, className }) => {
   return (
-    <main className={`min-h-screen ${className}`}>
+    <main
+      className={`min-h-screen ${className} transition-colors duration-300`}
+    >
       <div className="container mx-auto p-4 max-w-3xl flex flex-col gap-2">
         <nav className="text-sm pb-8 flex gap-4 items-center">
           <Link
             href="/custom"
-            className="underline opacity-50 hover:no-underline hover:opacity-100"
+            className="underline opacity-50 hover:no-underline hover:opacity-100 transition-opacity underline-offset-2 duration-300"
           >
             custom
           </Link>
           <Link
             href="/radix-colors"
-            className="underline opacity-50 hover:no-underline hover:opacity-100"
+            className="underline opacity-50 hover:no-underline hover:opacity-100 transition-opacity underline-offset-2 duration-300"
           >
             radix colors
           </Link>
           <Link
             href="/tailwind-colors"
-            className="underline opacity-50 hover:no-underline hover:opacity-100"
+            className="underline opacity-50 hover:no-underline hover:opacity-100 transition-opacity underline-offset-2 duration-300"
           >
             tailwind colors
           </Link>

apps/example/components/ThemeButton.tsx

@@ -2,22 +2,23 @@
 
 import { FC } from "react";
 
-function switchTheme(theme: string) {
+function switchTheme(theme: string, bg: string) {
   if (!theme) {
     document.documentElement.className = "";
   } else {
-    document.documentElement.className = `theme-${theme}`;
+    document.documentElement.className = `theme-${theme} ${bg}`;
   }
 }
 
 export const ThemeButton: FC<{
   className: string;
   theme: string;
-}> = ({ theme, className }) => {
+  bg: string;
+}> = ({ theme, bg, className }) => {
   return (
     <button
-      onClick={() => switchTheme(theme)}
-      className={`text-sm px-2 py-1.5 border rounded ${className}`}
+      onClick={() => switchTheme(theme, bg)}
+      className={`text-sm px-2 py-1.5 border rounded transition-colors duration-300 ${className}`}
     >
       {theme}
     </button>