Chat to Preview Layout

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { ReactNode, CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const DefaultChat = () => {
10  const messages = [
11    { from: "user", text: "Build me a landing page" },
12    { from: "ai", text: "Sure — what should it feature?" },
13    { from: "user", text: "Hero, pricing, footer." },
14    { from: "ai", text: "On it. Generating now..." },
15  ];
16  return (
17    <div
18      style={{
19        background: "#111",
20        display: "flex",
21        flexDirection: "column",
22        fontFamily: FONT_FAMILY,
23        gap: 12,
24        inset: 0,
25        padding: 24,
26        position: "absolute",
27      }}
28    >
29      <div
30        style={{
31          color: "#888",
32          fontSize: 12,
33          fontWeight: 600,
34          letterSpacing: "0.08em",
35          marginBottom: 8,
36          textTransform: "uppercase",
37        }}
38      >
39        Chat
40      </div>
41      {messages.map((m, i) => (
42        <div
43          key={i}
44          style={{
45            alignSelf: m.from === "user" ? "flex-end" : "flex-start",
46            background: m.from === "user" ? "#0ea5e9" : "#262626",
47            borderRadius: 14,
48            color: "white",
49            fontSize: 14,
50            maxWidth: "85%",
51            padding: "10px 14px",
52          }}
53        >
54          {m.text}
55        </div>
56      ))}
57    </div>
58  );
59};
60 
61const DefaultPreview = () => (
62  <div
63    style={{
64      background: "white",
65      display: "flex",
66      flexDirection: "column",
67      fontFamily: FONT_FAMILY,
68      inset: 0,
69      position: "absolute",
70    }}
71  >
72    <div
73      style={{
74        alignItems: "center",
75        background: "#f4f4f5",
76        borderBottom: "1px solid #e4e4e7",
77        display: "flex",
78        gap: 6,
79        height: 36,
80        padding: "0 12px",
81      }}
82    >
83      <div
84        style={{
85          background: "#ef4444",
86          borderRadius: 999,
87          height: 10,
88          width: 10,
89        }}
90      />
91      <div
92        style={{
93          background: "#f59e0b",
94          borderRadius: 999,
95          height: 10,
96          width: 10,
97        }}
98      />
99      <div
100        style={{
101          background: "#22c55e",
102          borderRadius: 999,
103          height: 10,
104          width: 10,
105        }}
106      />
107    </div>
108    <div
109      style={{
110        display: "flex",
111        flex: 1,
112        flexDirection: "column",
113        gap: 16,
114// … truncated