dynamic paddings and borders

src/app/interface/grid/index.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { useStore } from "@/app/store"
+
+export function Grid({ children, className }: { children: ReactNode; className: string }) {
+  const zoomLevel = useStore(state => state.zoomLevel)
+  return (
+    <div
+      // the "fixed" width ensure our comic keeps a consistent ratio
+      className={cn(
+        `w-full h-full grid`,
+        className
+      )}
+      style={{
+        gap: `${Math.round((zoomLevel / 100) * 8)}px`
+      }}
+      >
+      {children}
+    </div>
+  )
+}
+
+

src/app/interface/panel/index.tsx

@@ -35,6 +35,8 @@ export function Panel({
   const panels = useStore(state => state.panels)
   const prompt = panels[panel] || ""
 
+  const zoomLevel = useStore(state => state.zoomLevel)
+
   // const setCaption = useStore(state => state.setCaption)
   // const captions = useStore(state => state.captions)
   // const caption = captions[panel] || ""
@@ -160,10 +162,21 @@ export function Panel({
   }, [rendered.assetUrl, caption])
   */
 
-  if (isLoading) {
+  const frameClassName = cn(
+    `w-full h-full`,
+    `border-stone-900`,
+    `transition-all duration-200 ease-in-out`,
+    zoomLevel > 70 ? `border-2` : zoomLevel > 40 ? `border` : `border border-transparent`,
+    `shadow-sm`,
+    `rounded-sm`,
+    `overflow-hidden`,
+  )
+
+  if (prompt && !rendered.assetUrl) {
     return (
       <div className={cn(
-        `w-full h-full flex flex-col items-center justify-center`,
+        frameClassName,
+        `flex flex-col items-center justify-center`,
         className
       )}>
        <Progress isLoading />
@@ -173,12 +186,8 @@ export function Panel({
 
   return (
     <div className={cn(
-      `w-full h-full`,
+      frameClassName,
       { "grayscale": preset.color === "grayscale" },
-      `border-2 border-stone-900`,
-      `shadow-sm`,
-      `rounded-sm`,
-      `overflow-hidden`,
       className
     )}>
       {rendered.assetUrl && <img

src/app/layouts/index.tsx

@@ -2,17 +2,16 @@
 
 import { Panel } from "@/app/interface/panel"
 import { pick } from "@/lib/pick"
+import { Grid } from "@/app/interface/grid"
 
 export function Layout1() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
+    <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-stone-100">
         <Panel
           panel={0}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-zinc-100 row-span-2">
@@ -33,22 +32,20 @@ export function Layout1() {
         <Panel
           panel={3}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
-    </div>
+    </Grid>
   )
 }
 
 export function Layout2() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
+    <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-gray-100 row-span-3 col-span-1">
         <Panel
           panel={0}
-          width={512}
+          width={768}
           height={1024}
         />
       </div>
@@ -56,43 +53,41 @@ export function Layout2() {
         <Panel
           panel={1}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-stone-100">
         <Panel
           panel={2}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-zinc-100 row-span-1 col-span-1">
         <Panel
           panel={3}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
-    </div>
+    </Grid>
   )
 }
 
 export function Layout3() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-5 grid-rows-2 gap-2">
+    <Grid className="grid-cols-5 grid-rows-2">
       <div className="bg-zinc-100 col-span-3">
         <Panel
           panel={0}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-zinc-100 col-span-2 row-span-2">
         <Panel
           panel={1}
-          width={512}
+          width={768}
           height={1024}
         />
       </div>
@@ -100,27 +95,25 @@ export function Layout3() {
         <div className="bg-stone-100">
           <Panel
             panel={2}
-            width={512}
+            width={768}
             height={758}
           />
         </div>
         <div className="bg-slate-100">
           <Panel
             panel={3}
-            width={512}
+            width={768}
             height={758}
           />
         </div>
       </div>
-    </div>
+    </Grid>
   )
 }
 
 export function Layout4() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-2 grid-rows-3 gap-2">
+    <Grid className="grid-cols-2 grid-rows-3">
       <div className="bg-slate-100 row-span-2">
         <Panel
           panel={0}
@@ -132,14 +125,14 @@ export function Layout4() {
         <Panel
           panel={1}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-zinc-100 row-span-2">
         <Panel
           panel={2}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-stone-100">
@@ -149,34 +142,32 @@ export function Layout4() {
           height={1024}
         />
       </div>
-    </div>
+    </Grid>
   )
 }
 
 
 export function Layout5() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
+    <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
           panel={0}
-          width={512}
+          width={768}
           height={768}
         />
       </div>
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
           panel={1}
-          width={512}
+          width={768}
           height={768}
         />
       </div>
       <div className="bg-stone-100 row-span-2 col-span-1">
         <Panel
           panel={2}
-          width={512}
+          width={768}
           height={1024}
         />
       </div>
@@ -184,36 +175,34 @@ export function Layout5() {
         <Panel
           panel={3}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
-    </div>
+    </Grid>
   )
 }
 
 export function Layout6() {
   return (
-    <div
-      // the "fixed" width ensure our comic keeps a consistent ratio
-      className="w-full h-full grid grid-cols-3 grid-rows-2 gap-2">
+    <Grid className="grid-cols-3 grid-rows-2">
       <div className="bg-zinc-100 col-span-2 row-span-1">
         <Panel
           panel={0}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
       <div className="bg-zinc-100 col-span-1 row-span-1">
         <Panel
           panel={1}
-          width={512}
+          width={768}
           height={768}
         />
       </div>
       <div className="bg-stone-100 row-span-1 col-span-1">
         <Panel
           panel={2}
-          width={512}
+          width={768}
           height={768}
         />
       </div>
@@ -221,10 +210,10 @@ export function Layout6() {
         <Panel
           panel={3}
           width={1024}
-          height={512}
+          height={768}
         />
       </div>
-    </div>
+    </Grid>
   )
 }
 

src/app/main.tsx

@@ -75,16 +75,23 @@ export default function Main() {
       )}>
         <div className="flex flex-col items-center w-full">
           <div
-            // we are trying to reach a "book" look
-            // we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
+
             className={cn(
-              `flex flex-col items-center justify-start aspect-[210/297]`,
+              `flex flex-col items-center justify-start`,
+
+              // we are trying to reach a "book" look
+              // we are using aspect-[297/210] because it matches A4 (297mm x 210mm)
+              // `aspect-[210/297]`,
+              `aspect-[250/297]`,
+
               `transition-all duration-100 ease-in-out`,
-              `p-4`,
               `border border-stone-200`,
               `shadow-2xl`
             )}
-            style={{ width: `${zoomLevel}%` }}
+            style={{
+              width: `${zoomLevel}%`,
+              padding: `${Math.round((zoomLevel / 100) * 16)}px`
+            }}
             >
             <LayoutElement />
           </div>