-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathQuoteGeneratorApp.jsx
More file actions
103 lines (90 loc) · 3.06 KB
/
QuoteGeneratorApp.jsx
File metadata and controls
103 lines (90 loc) · 3.06 KB
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import React, { useState, useEffect } from 'react';
import { useToast } from '../../hooks/useToast';
import CanvasPreview from './components/CanvasPreview';
import ControlPanel from './components/ControlPanel';
import { DownloadSimpleIcon } from '@phosphor-icons/react';
const QuoteGeneratorApp = () => {
const { addToast } = useToast();
// State
const [state, setState] = useState({
text: 'The only way to deal with an unfree world is to become so absolutely free that your very existence is an act of rebellion.',
author: 'Albert Camus',
width: 1080,
height: 1080, // Square by default, maybe customizable later
backgroundColor: '#ffffff',
textColor: '#000000',
fontFamily: 'Inter',
fontSize: 48,
fontWeight: 800,
textAlign: 'left',
padding: 80,
lineHeight: 1.2,
backgroundImage: null,
overlayOpacity: 0,
overlayColor: '#000000',
themeType: 'standard', // 'standard', 'wordbox', 'typewriter'
});
const [triggerDownload, setTriggerDownload] = useState(false);
const updateState = (newState) => {
setState((prev) => ({ ...prev, ...newState }));
};
// Font Loading
useEffect(() => {
const fonts = [
'Inter:wght@400;700;900',
'Playfair+Display:ital,wght@0,400;0,700;1,400',
'Cinzel:wght@400;700',
'Caveat:wght@400;700',
'Oswald:wght@400;700',
'Lora:ital,wght@0,400;0,700;1,400',
'Montserrat:wght@400;700;900',
'Space+Mono:ital,wght@0,400;0,700;1,400',
'UnifrakturMaguntia',
];
const link = document.createElement('link');
link.href = `https://fonts.googleapis.com/css2?family=${fonts.join('&')}&display=swap`;
link.rel = 'stylesheet';
document.head.appendChild(link);
return () => {
document.head.removeChild(link);
};
}, []);
const handleDownload = (dataUrl) => {
const link = document.createElement('a');
link.download = `quote-${Date.now()}.png`;
link.href = dataUrl;
link.click();
setTriggerDownload(false);
addToast({
title: 'Quote Downloaded',
message: 'Your quote has been saved successfully.',
type: 'success',
});
};
return (
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
{/* Controls */}
<div className="lg:col-span-4 h-fit lg:sticky lg:top-8">
<ControlPanel state={state} updateState={updateState} />
</div>
{/* Preview */}
<div className="lg:col-span-8 space-y-4">
<CanvasPreview
{...state}
onDownload={handleDownload}
triggerDownload={triggerDownload}
/>
<div className="flex justify-end">
<button
onClick={() => setTriggerDownload(true)}
className="flex items-center gap-2 px-6 py-3 bg-white text-black hover:bg-primary-500 hover:text-white transition-all font-mono uppercase tracking-widest text-xs font-bold rounded-sm"
>
<DownloadSimpleIcon weight="bold" size={18} />
<span>Download PNG</span>
</button>
</div>
</div>
</div>
);
};
export default QuoteGeneratorApp;