fmt

Author: ComputelessComputer

apps/web/src/components/video-player.tsx

@@ -38,7 +38,7 @@ export function VideoPlayer({
 
   return (
     <div
-      className={cn("relative w-full h-full overflow-hidden group", className)}
+      className={cn(["relative w-full h-full overflow-hidden group", className])}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -60,10 +60,12 @@ export function VideoPlayer({
       {showButtons && showControls && (
         <div
           className={cn(
-            "absolute bottom-0 left-0 right-0",
-            "transition-all duration-300 ease-out",
-            "flex gap-0",
-            isHovered ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
+            [
+              "absolute bottom-0 left-0 right-0",
+              "transition-all duration-300 ease-out",
+              "flex gap-0",
+              isHovered ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
+            ],
           )}
         >
           <button

apps/web/src/components/video-thumbnail.tsx

@@ -14,7 +14,7 @@ export function VideoThumbnail({
   onPlay,
 }: VideoThumbnailProps) {
   return (
-    <div className={cn("relative w-full h-full overflow-hidden group cursor-pointer", className)} onClick={onPlay}>
+    <div className={cn(["relative w-full h-full overflow-hidden group cursor-pointer", className])} onClick={onPlay}>
       {/* Static thumbnail from Mux */}
       <MuxPlayer
         playbackId={playbackId}
@@ -34,12 +34,12 @@ export function VideoThumbnail({
             e.stopPropagation();
             onPlay?.();
           }}
-          className={cn(
+          className={cn([
             "size-16 rounded-full bg-white/90 backdrop-blur-sm",
             "flex items-center justify-center",
             "hover:bg-white hover:scale-110 transition-all duration-200",
             "shadow-xl",
-          )}
+          ])}
           aria-label="Play video"
         >
           <Icon icon="mdi:play" className="text-4xl text-stone-700 ml-1" />

apps/web/src/routes/_view/index.tsx

@@ -122,18 +122,20 @@ function Component() {
         >
           <div
             className={cn(
-              "flex items-center justify-center gap-2 text-center",
-              "bg-stone-50/70 border-b border-stone-100",
-              "py-3 px-4",
-              "font-serif text-sm text-stone-700",
-              "hover:bg-stone-50 transition-all",
+              [
+                "flex items-center justify-center gap-2 text-center",
+                "bg-stone-50/70 border-b border-stone-100",
+                "py-3 px-4",
+                "font-serif text-sm text-stone-700",
+                "hover:bg-stone-50 transition-all",
+              ],
             )}
           >
             <span className="group-hover:font-medium">Backed by</span>
             <img
               src="/icons/yc_stone.svg"
               alt="Y Combinator"
-              className={cn("h-4 w-4 inline-block group-hover:scale-105")}
+              className="h-4 w-4 inline-block group-hover:scale-105"
             />
             <span className="group-hover:font-medium">Y Combinator</span>
           </div>
@@ -459,10 +461,12 @@ Mad respect to the team. This is how you build in 2025. 🚀"
                   key={index}
                   onClick={() => scrollToFeature(index)}
                   className={cn(
-                    "h-1 rounded-full transition-all cursor-pointer",
-                    selectedFeature === index
-                      ? "w-8 bg-stone-600"
-                      : "w-8 bg-neutral-300 hover:bg-neutral-400",
+                    [
+                      "h-1 rounded-full transition-all cursor-pointer",
+                      selectedFeature === index
+                        ? "w-8 bg-stone-600"
+                        : "w-8 bg-neutral-300 hover:bg-neutral-400",
+                    ],
                   )}
                   aria-label={`Go to feature ${index + 1}`}
                 />
@@ -629,10 +633,12 @@ Mad respect to the team. This is how you build in 2025. 🚀"
                     key={index}
                     onClick={() => scrollToDetail(index)}
                     className={cn(
-                      "h-1 rounded-full transition-all cursor-pointer",
-                      selectedDetail === index
-                        ? "w-8 bg-stone-600"
-                        : "w-8 bg-neutral-300 hover:bg-neutral-400",
+                      [
+                        "h-1 rounded-full transition-all cursor-pointer",
+                        selectedDetail === index
+                          ? "w-8 bg-stone-600"
+                          : "w-8 bg-neutral-300 hover:bg-neutral-400",
+                      ],
                     )}
                     aria-label={`Go to detail ${index + 1}`}
                   />