astral/buzz-sheet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : imrpove extra section

Browse Source
This commit is contained in:
gunshiz
2026-09-25 17:32:12 +07:00 Unverified
parent eedaa02724
commit 4d6a6a1a8b
2 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/guide-section-editor.tsx
+67 -47
View File
@@ -68,6 +68,12 @@ import {
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Checkbox } from "@/components/ui/checkbox";
import {
ColorPicker,
ColorPickerEyeDropper,
ColorPickerHue,
ColorPickerSelection,
} from "@/components/ui/color-picker";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
Card,
@@ -105,6 +111,7 @@ import {
FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import {
Select,
SelectContent,
@@ -4894,53 +4901,66 @@ function ExtraEditor({ guide, extraSectionId, initial, characters, weapons, arti
) || undefined}
>
<FieldLabel>สีพื้นหลัง</FieldLabel>
<Input
type="color"
value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
aria-invalid={extraIssue(
"sections",
sectionIndex,
"rows",
rowIndex,
"backgroundColor",
)}
onClick={() => {
if (row.backgroundColor !== null) return;
setSections(
sections.map((item, index) =>
index === sectionIndex
? {
...item,
rows: item.rows.map((candidate, inner) =>
inner === rowIndex
? {
...candidate,
backgroundColor: DEFAULT_EXTRA_BACKGROUND_COLOR,
}
: candidate,
),
}
: item,
),
);
}}
onChange={(event) =>
setSections(
sections.map((item, index) =>
index === sectionIndex
? {
...item,
rows: item.rows.map((candidate, inner) =>
inner === rowIndex
? { ...candidate, backgroundColor: event.target.value }
: candidate,
),
}
: item,
),
)
}
/>
<Popover>
<PopoverTrigger
render={
<Button
type="button"
variant="outline"
size="icon"
aria-label="เลือกสีพื้นหลังการ์ด"
aria-invalid={extraIssue(
"sections",
sectionIndex,
"rows",
rowIndex,
"backgroundColor",
)}
>
<span
className="size-5 rounded-sm border"
style={{
backgroundColor:
row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR,
}}
/>
</Button>
}
/>
<PopoverContent align="start" className="w-64">
<ColorPicker
value={row.backgroundColor ?? DEFAULT_EXTRA_BACKGROUND_COLOR}
className="h-auto"
onChange={(color) => {
if (!Array.isArray(color)) return;
const backgroundColor = `#${color
.slice(0, 3)
.map((channel) =>
Math.round(channel).toString(16).padStart(2, "0"),
)
.join("")}`.toUpperCase();
setSections(
sections.map((item, index) =>
index === sectionIndex
? {
...item,
rows: item.rows.map((candidate, inner) =>
inner === rowIndex
? { ...candidate, backgroundColor }
: candidate,
),
}
: item,
),
);
}}
>
<ColorPickerSelection className="h-32" />
<ColorPickerHue />
<ColorPickerEyeDropper aria-label="ดูดสีจากหน้าจอ" />
</ColorPicker>
</PopoverContent>
</Popover>
</Field>
<Button
type="button"