Spaces:
Build error
Build error
File size: 1,761 Bytes
cce8120 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | #!/usr/bin/env bash
set -euo pipefail
mkdir -p components/device
cat > components/device/DevicePreview.jsx <<'EOC'
"use client";
import { useState } from "react";
const DEVICES = {
phone: { width: 390, height: 844 },
tablet: { width: 820, height: 1180 },
desktop: { width: 1440, height: 900 }
};
export default function DevicePreview({ url = "http://localhost:3000" }) {
const [device, setDevice] = useState("phone");
const size = DEVICES[device];
return (
<div className="flex h-full flex-col bg-slate-950">
<div className="flex items-center gap-2 border-b border-slate-800 p-3">
<button
onClick={() => setDevice("phone")}
className="rounded bg-sky-600 px-3 py-1 text-white">
Phone
</button>
<button
onClick={() => setDevice("tablet")}
className="rounded bg-slate-700 px-3 py-1 text-white">
Tablet
</button>
<button
onClick={() => setDevice("desktop")}
className="rounded bg-slate-700 px-3 py-1 text-white">
Desktop
</button>
</div>
<div className="flex flex-1 items-center justify-center overflow-auto bg-slate-900">
<iframe
title="Device Preview"
src={url}
style={{
width: size.width,
height: size.height,
border: "1px solid #334155",
borderRadius: "14px",
background: "#ffffff"
}}
/>
</div>
</div>
);
}
EOC
cat > components/device/index.js <<'EOC'
export { default } from "./DevicePreview";
EOC
echo "[1/4] Verify..."
test -f components/device/DevicePreview.jsx
test -f components/device/index.js
echo "[2/4] Device Preview installed."
|