Skip to content

Commit 92faa34

Browse files
wintkhantlinwintkhantlin
committed
remove outline and add focus border blue
1 parent 12038ea commit 92faa34

4 files changed

Lines changed: 30 additions & 34 deletions

File tree

‎src/App.tsx‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { createSignal, createMemo } from "solid-js";
1+
import { createSignal, createMemo, For, Show } from "solid-js";
22
import { createStore } from "solid-js/store";
3-
import { For } from "solid-js";
43
import type { Component } from "solid-js";
54
import PlusIcon from "lucide-solid/icons/plus";
65
import { CopyIcon, TrashIcon } from "lucide-solid";
@@ -119,16 +118,16 @@ const App: Component = () => {
119118
</div>
120119
))}
121120

122-
<div>
121+
<div>
123122
<h2 class="text-lg">Body</h2>
124123
<div class="space-y-2 divide-y-[1px] dark:divide-white/20">
125124
<For each={store.sections}>
126125
{(section, index) => (
127-
<div class="space-y-3">
126+
<div class="space-y-3 py-2">
128127
<Select
129128
class="block my-4"
130129
value={section.type}
131-
onInput={(e) => handleChange(index(), "{ type",: e.currentTarget.value as Section["type"] })}
130+
onInput={(e) => handleChange(index(), { type: e.currentTarget.value as Section["type"] })}
132131
>
133132
{["Markdown", "Textarea", "Input", "Dropdown", "Checkboxes"].map((type) => (
134133
<option value={type}>{type}</option>
@@ -141,28 +140,27 @@ const App: Component = () => {
141140
class="w-full block"
142141
placeholder="Enter label"
143142
value={section.label || ""}
144-
onInput={(e) => handleChange(index(), "label", e.currentTarget.value)}
143+
onInput={(e) => handleChange(index(), { label: e.currentTarget.value })}
145144
/>
146145
<Input
147146
class="w-full block"
148147
placeholder="Enter description"
149148
value={section.description || ""}
150-
onInput={(e) => handleChange(index(), "description", e.currentTarget.value)}
149+
onInput={(e) => handleChange(index(), { description: e.currentTarget.value })}
151150
/>
152151
{section.type === "Input" && (
153152
<>
154153
<Input
155154
class="w-full block"
156155
placeholder="Enter placeholder"
157156
value={section.placeholder || ""}
158-
onInput={(e) => handleChange(index(), "placeholder", e.currentTarget.value)}
157+
onInput={(e) => handleChange(index(), { placeholder: e.currentTarget.value })}
159158
/>
160159
<Input
161160
class="w-full block"
162161
placeholder="Enter value"
163162
value={section.value || ""}
164-
onInputflex justify-end">
165-
<Button variety="primary" class="flex gap-1" onClick={(e) => handleChange(index(), "value", e.currentTarget.value)}
163+
onInput={(e) => handleChange(index(), { value: e.currentTarget.value })}
166164
/>
167165
</>
168166
)}
@@ -172,35 +170,34 @@ const App: Component = () => {
172170
class="w-full block"
173171
placeholder="Enter text"
174172
value={section.value || ""}
175-
onInput={(e) => handleChange(index(), "value", e.currentTarget.value)}
173+
onInput={(e) => handleChange(index(), { value: e.currentTarget.value })}
176174
/>
177175
)}
178-
{section.type === "Dropdown" && (
176+
{(section.type === "Dropdown" || section.type === "Checkboxes") && (
179177
<Input
180178
class="w-full block"
181179
placeholder="Enter options"
182180
value={section.options?.join(", ") || ""}
183-
onInput={(e) => handleChange(index(), "options", e.currentTarget.value.split(", "))}
184-
/>
185-
)}
186-
{section.type === "Checkboxes" && (
187-
<Input
188-
class="w-full block"
189-
placeholder="Enter options"
190-
value={section.options?.join(", ") || ""}
191-
onInput={(e) => handleChange(index(), "options", e.currentTarget.value.split(", "))}
181+
onInput={(e) => handleChange(index(), { options: e.currentTarget.value.split(", ") })}
192182
/>
193183
)}
194184
</Show>
195-
{section.type === "Markdown" && (
185+
186+
<Show when={section.type === "Markdown"}>
196187
<Textarea
197188
rows={3}
198189
class="w-full block"
199190
placeholder="Enter markdown content"
200191
value={section.value || ""}
201-
onInput={(e) => handleChange(index(), "value", e.currentTarget.value)}
192+
onInput={(e) => handleChange(index(), { value: e.currentTarget.value })}
202193
/>
203-
)}removeSection(index())}>
194+
</Show>
195+
196+
<Button
197+
variety="ghost"
198+
class="flex gap-1 text-red-600"
199+
onClick={() => removeSection(index())}
200+
>
204201
<TrashIcon size={14} /> Remove
205202
</Button>
206203
</div>
@@ -212,7 +209,7 @@ const App: Component = () => {
212209
<Button
213210
variety="primary"
214211
class="flex gap-1 py-1.5 items-center"
215-
variety="primary" class="flex gap-1 py-1.5" onClick={addSection}
212+
onClick={addSection}
216213
>
217214
<PlusIcon size={14} />
218215
Add Section
@@ -226,15 +223,13 @@ const App: Component = () => {
226223
<div class="flex justify-end">
227224
<button
228225
class="px-4 py-1 flex items-center gap-2 text-sm hover:bg-black/10 dark:hover:bg-white/10 rounded transform duration-200"
229-
rounded" onClick={handleCopy}
226+
onClick={handleCopy}
230227
>
231228
{copied() ? "Copied" : "Copy"}
232229
<CopyIcon size={17} />
233230
</button>
234231
</div>
235-
<Highlight language="yaml">
236-
{store.yamlOutput}
237-
{yamlOutput()}</Highlight>
232+
<Highlight language="yaml">{yamlOutput()}</Highlight>
238233
</div>
239234
</div>
240235
</div>

‎src/components/ui/Button.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@ import { cva } from "class-variance-authority";
22
import { JSX } from "solid-js/jsx-runtime";
33
import { twMerge } from "tailwind-merge";
44

5-
const button = cva("px-4 py-1 rounded text-sm", {
5+
const button = cva("px-4 py-1 rounded text-sm flex items-center gap-2", {
66
variants: {
77
variety: {
88
primary: "bg-[#238636] border border-[#ffffff1a] text-white",
9-
secondary: "bg-gray-100 border border-gray-200 dark:bg-slate-100/10 dark:border-zinc-700 hover:dark:bg-slate-100/20 hover:bg-gray-200"
9+
secondary: "bg-gray-100 border border-gray-200 dark:bg-slate-100/10 dark:border-zinc-700 hover:dark:bg-slate-100/20 hover:bg-gray-200",
10+
ghost: "bg-transparent hover:bg-black/5 dark:bg-white/5"
1011
}
1112
},
1213
defaultVariants: {
1314
variety: "primary",
1415
},
1516
})
1617

17-
export default function Button(props: JSX.ButtonHTMLAttributes<HTMLButtonElement> & { variety: "primary" | "secondary" }) {
18+
export default function Button(props: JSX.ButtonHTMLAttributes<HTMLButtonElement> & { variety: "primary" | "secondary" | "ghost" }) {
1819
return <button {...props} class={twMerge(button({ variety: props.variety, class: props.class }))}>{props.children}</button>
1920
}

‎src/components/ui/Input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { twMerge } from 'tailwind-merge'
33

44
export default function Input(props: JSX.InputHTMLAttributes<HTMLInputElement>) {
55
return (
6-
<input {...props} class={twMerge("p-[5px_12px] text-[14px] dark:text-[#f0f6fc] border dark:border-[#3d444d] rounded dark:bg-[#151b23]/20 bg-[#f6f8fa] border-[#d1d9e0] transform duration-100 focus:bg-transparent outline-blue-500", props.class)}/>
6+
<input {...props} class={twMerge("outline-none p-[5px_12px] text-[14px] dark:text-[#f0f6fc] border dark:border-[#3d444d] rounded dark:bg-[#151b23]/20 bg-[#f6f8fa] border-[#d1d9e0] transform duration-100 focus:bg-transparent focus:border-blue-500", props.class)}/>
77
)
88
}

‎src/components/ui/Textarea.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { twMerge } from 'tailwind-merge'
33

44
export default function Textarea(props: JSX.TextareaHTMLAttributes<HTMLTextAreaElement>) {
55
return (
6-
<textarea {...props} class={twMerge("p-[5px_12px] text-[14px] dark:text-[#f0f6fc] border dark:border-[#3d444d] rounded dark:bg-[#151b23]/20 bg-[#f6f8fa] border-[#d1d9e0] transform duration-100 focus:bg-transparent outline-blue-500", props.class)}/>
6+
<textarea {...props} class={twMerge("outline-none p-[5px_12px] text-[14px] dark:text-[#f0f6fc] border dark:border-[#3d444d] rounded dark:bg-[#151b23]/20 bg-[#f6f8fa] border-[#d1d9e0] transform duration-100 focus:bg-transparent focus:border-blue-500", props.class)}/>
77
)
88
}

0 commit comments

Comments
 (0)