refactor(web): add variant prop to preview component

Support fill and center variants for different preview layouts,
enabling badge preview without aspect-square constraint.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: wontory

apps/web/src/components/preview.tsx

@@ -9,23 +9,37 @@ import Image from 'next/image'
 
 import { CodeBlock } from '#components/code-block'
 
-export function Preview({ src, code }: { src: string; code: string }) {
+export function Preview({
+  src,
+  code,
+  variant = 'fill',
+}: {
+  src: string
+  code: string
+  variant?: 'fill' | 'center'
+}) {
   return (
     <section className="@5xl/main:order-last order-first">
       <Card className="@container/card">
         <CardHeader>
           <CardTitle>Preview</CardTitle>
         </CardHeader>
         <CardContent className="relative">
-          <div className="relative aspect-square size-full">
-            <Image
-              src={src}
-              alt="Preview"
-              fill={true}
-              draggable={false}
-              unoptimized={true}
-            />
-          </div>
+          {variant === 'fill' ? (
+            <div className="relative aspect-square size-full">
+              <Image
+                src={src}
+                alt="Preview"
+                fill={true}
+                draggable={false}
+                unoptimized={true}
+              />
+            </div>
+          ) : (
+            <div className="flex min-h-40 items-center justify-center">
+              <img src={src} alt="Preview" draggable={false} />
+            </div>
+          )}
         </CardContent>
         <CardFooter>
           <CodeBlock language="markdown" code={code} />