-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathtextarea.html
More file actions
173 lines (172 loc) · 7.57 KB
/
textarea.html
File metadata and controls
173 lines (172 loc) · 7.57 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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<div class="w-full flex flex-row">
<div class="w-full relative">
<textarea
data-slot="textarea"
class="border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 text-base shadow-xs transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm p-4 md:px-6 lg:px-8 resize-none w-full bg-background outline-none rounded-lg h-[400px] text-foreground placeholder:text-muted-foreground border-0 focus-visible:ring-0 pb-24"
placeholder="Paste your AI-generated text here..."
style="padding-bottom: 100px"
>
1. Getting Started with Tableau
</textarea
>
<div
class="absolute bottom-0 left-0 right-0 px-4 py-3 bg-card/95 backdrop-blur-sm border-t border-border"
>
<div class="flex flex-col w-full gap-2">
<div class="flex w-full justify-between items-center flex-wrap gap-3">
<div class="flex flex-col gap-1.5">
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
<span class="text-sm font-semibold text-muted-foreground"
>2392</span
><span class="text-xs text-muted-foreground">/ 5000</span>
</div>
</div>
</div>
<div class="flex items-center gap-4 flex-wrap">
<div
class="relative inline-flex items-center bg-muted rounded-lg p-1 border border-border"
role="group"
>
<button
type="button"
class="relative px-4 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-1.5 text-muted-foreground hover:text-foreground cursor-pointer"
aria-pressed="false"
aria-label="Basic mode"
>
Basic<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info w-3.5 h-3.5 text-muted-foreground hover:text-foreground transition-colors"
data-state="closed"
data-slot="tooltip-trigger"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg></button
><button
type="button"
class="relative px-4 py-1.5 text-sm font-medium rounded-md transition-all duration-200 flex items-center gap-1.5 bg-background text-foreground shadow-sm cursor-pointer"
aria-pressed="true"
aria-label="Autopilot mode"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-zap w-3.5 h-3.5"
>
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
></path></svg
>Autopilot<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-info w-3.5 h-3.5 text-foreground/70 hover:text-foreground transition-colors"
data-state="closed"
data-slot="tooltip-trigger"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4"></path>
<path d="M12 8h.01"></path>
</svg>
</button>
</div>
<div class="flex flex-col gap-2 items-end">
<button
data-slot="button"
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 rounded-md px-6 has-[>svg]:px-4 gap-2 bg-primary hover:bg-primary/90 text-primary-foreground"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-zap h-4 w-4"
>
<path
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
></path></svg
>Humanize Now
</button>
</div>
</div>
</div>
</div>
</div>
<div class="absolute top-2 right-2 mr-2 ml-2">
<button
class="p-2 rounded-xl flex items-center justify-center cursor-pointer hover:bg-muted transition-colors border border-transparent hover:border-border"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash2 w-4 h-4 text-muted-foreground"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</button>
</div>
</div>
</div>
<div class="absolute top-2 right-2 mr-2 ml-2">
<button
class="p-2 rounded-xl flex items-center justify-center cursor-pointer hover:bg-muted transition-colors border border-transparent hover:border-border"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-trash2 w-4 h-4 text-muted-foreground"
>
<path d="M3 6h18"></path>
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
<line x1="10" x2="10" y1="11" y2="17"></line>
<line x1="14" x2="14" y1="11" y2="17"></line>
</svg>
</button>
</div>