Skip to content

Commit 9344d3b

Browse files
hmdrohhmdroh
committed
options
1 parent f4ad56c commit 9344d3b

5 files changed

Lines changed: 147 additions & 30 deletions

File tree

‎apps/web/components/gradient-editor.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@ const componentSocialMapping = {
6767
},
6868
};
6969

70+
71+
const gradientTypes = [
72+
{ label: "Default", value: "default" },
73+
{ label: "Nano", value: "nano" },
74+
{ label: "Mini", value: "mini" },
75+
{ label: "Pink", value: "pink" },
76+
];
77+
7078
export default function GradientEditor() {
7179
const [loaded, setLoaded] = useState(false);
7280

@@ -84,9 +92,10 @@ export default function GradientEditor() {
8492
hasCardBorder: false,
8593
isRtl: false,
8694

87-
title: "Title",
88-
text: `Text"`,
95+
title: "Postmaker.dev",
96+
text: `Create Posts"`,
8997
rounded: true,
98+
gradientType: "default",
9099
gradientWidth: 300,
91100
gradientHeight: 200,
92101
});
@@ -109,6 +118,7 @@ export default function GradientEditor() {
109118
exportScale,
110119
gradientWidth,
111120
gradientHeight,
121+
gradientType,
112122
} = state;
113123

114124
// Load from localStorage on mount
@@ -160,6 +170,23 @@ export default function GradientEditor() {
160170
onChange={(e) => setStateValue(e.target.name, e.target.value)}
161171
placeholder="Enter logo URL label..."
162172
/>
173+
174+
175+
{/* gradient types select */}
176+
<p>Gradient Type:</p>
177+
<select
178+
className="w-full px-2 border rounded-md"
179+
value={gradientType}
180+
name="gradientType"
181+
onChange={(e) => setStateValue(e.target.name, e.target.value)}
182+
>
183+
{gradientTypes.map((type) => (
184+
<option key={type.value} value={type.value}>
185+
{type.label}
186+
</option>
187+
))}
188+
</select>
189+
163190
<p>Title:</p>
164191
<input
165192
className="w-full px-2 border rounded-md"
@@ -383,6 +410,7 @@ export default function GradientEditor() {
383410
gradientHeight={gradientHeight}
384411
rounded={rounded}
385412
scale={scale}
413+
gradientType={gradientType}
386414
styles={{
387415
zIndex: 10,
388416
// scale: exportScale,

‎apps/web/public/gpt-5-mini.jpg‎

241 KB
Loading

‎apps/web/public/gpt-5-nano-1.jpg‎

133 KB
Loading

‎apps/web/public/gpt-5.jpg‎

237 KB
Loading

‎packages/ui/src/gradient-preview/gradient-preview.tsx‎

Lines changed: 117 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ interface GradientPreviewProps {
1818
text: string;
1919
gradientWidth?: number;
2020
gradientHeight?: number;
21+
gradientType?: string;
2122
}
2223

2324
export const GradientPreview: React.FC<GradientPreviewProps> = ({
@@ -32,6 +33,7 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
3233
scale = 1,
3334
gradientWidth,
3435
gradientHeight,
36+
gradientType = "default",
3537
}) => {
3638
return (
3739
<CardContainer
@@ -43,44 +45,131 @@ export const GradientPreview: React.FC<GradientPreviewProps> = ({
4345
lightMode={true}
4446
scale={scale}
4547
>
46-
{title && <div
47-
className="roboto-flex mb-4 text-center font-bold"
48+
{title && (
49+
<div
50+
className="roboto-flex mb-4 text-center font-bold"
51+
style={{
52+
fontSize: "1.8rem",
53+
color: "#000",
54+
}}
55+
>
56+
{title}
57+
</div>
58+
)}
59+
{gradientType === "default" && (
60+
<div
61+
style={{
62+
display: "flex",
63+
justifyContent: "center",
64+
alignItems: "center",
65+
width: "100%",
66+
height: gradientHeight ? gradientHeight : 200,
67+
marginBottom: "16px",
68+
}}
69+
>
70+
<PastelGradientCanvas
71+
width={gradientWidth}
72+
height={gradientHeight}
73+
rounded={rounded}
74+
/>
75+
</div>
76+
)}
77+
78+
{gradientType === "nano" && (
79+
<div
4880
style={{
49-
fontSize: "1.8rem",
50-
color: "#000",
81+
display: "flex",
82+
justifyContent: "center",
83+
alignItems: "center",
84+
width: "100%",
85+
height: gradientHeight ? gradientHeight : 200,
86+
marginBottom: "16px",
5187
}}
5288
>
53-
{title}
54-
</div>}
55-
<div style={{
56-
display: "flex",
57-
justifyContent: "center",
58-
alignItems: "center",
59-
width: "100%",
60-
height: gradientHeight ? gradientHeight : 200,
61-
marginBottom: "16px",
62-
}}>
63-
<PastelGradientCanvas
64-
width={gradientWidth}
65-
height={gradientHeight}
66-
rounded={rounded} />
67-
</div>
68-
<div
89+
<img
90+
style={{
91+
objectFit: "cover",
92+
width: gradientWidth ? gradientWidth + "px" : "100%",
93+
height: gradientHeight ? gradientHeight + "px" : "100%",
94+
borderRadius: rounded ? "15px" : "0",
95+
}}
96+
src="/gpt-5-nano-1.jpg"
97+
width={100}
98+
height={100}
99+
alt="Background"
100+
/>
101+
</div>)}
102+
103+
{gradientType === "mini" && (
104+
<div
69105
style={{
106+
display: "flex",
107+
justifyContent: "center",
108+
alignItems: "center",
70109
width: "100%",
71-
height: "100%",
110+
height: gradientHeight ? gradientHeight : 200,
111+
marginBottom: "16px",
72112
}}
73113
>
74-
{text && <div
75-
className="roboto-flex text-center"
114+
<img
76115
style={{
77-
color: "#000",
78-
fontSize: "1.2rem",
116+
objectFit: "cover",
117+
width: gradientWidth ? gradientWidth + "px" : "100%",
118+
height: gradientHeight ? gradientHeight + "px" : "100%",
119+
borderRadius: rounded ? "15px" : "0",
120+
}}
121+
src="/gpt-5-mini.jpg"
122+
width={100}
123+
height={100}
124+
alt="Background"
125+
/>
126+
</div>)}
79127

128+
{gradientType === "pink" && (
129+
<div
130+
style={{
131+
display: "flex",
132+
justifyContent: "center",
133+
alignItems: "center",
134+
width: "100%",
135+
height: gradientHeight ? gradientHeight : 200,
136+
marginBottom: "16px",
137+
}}
138+
>
139+
<img
140+
style={{
141+
objectFit: "cover",
142+
width: gradientWidth ? gradientWidth + "px" : "100%",
143+
height: gradientHeight ? gradientHeight + "px" : "100%",
144+
borderRadius: rounded ? "15px" : "0",
80145
}}
81-
>
82-
{text}
83-
</div>}
146+
src="/gpt-5.jpg"
147+
width={100}
148+
height={100}
149+
alt="Background"
150+
/>
151+
</div>)}
152+
153+
154+
155+
156+
<div
157+
style={{
158+
width: "100%",
159+
height: "100%",
160+
}}
161+
>
162+
{text && (
163+
<div
164+
className="roboto-flex text-center"
165+
style={{
166+
color: "#000",
167+
fontSize: "1.2rem",
168+
}}
169+
>
170+
{text}
171+
</div>
172+
)}
84173
</div>
85174
</CardContainer>
86175
);

0 commit comments

Comments
 (0)