♻️ refactor!: massive refactor

This commit is contained in:
2026-05-31 03:04:30 +07:00
parent c1f12c7201
commit df3c944547
86 changed files with 3691 additions and 1129 deletions
@@ -66,15 +66,21 @@ export function EditorMobileSection(props: EditorMobileSectionProps) {
return (
<section className="lg:hidden">
<div className={`rounded-2xl border p-3 ${isDark ? "border-white/10 bg-[#2a2c31]" : "border-black/10 bg-white"}`}>
<div
className={`rounded-2xl border p-3 ${isDark ? "border-white/10 bg-[#2a2c31]" : "border-black/10 bg-white"}`}
>
<div className="mb-2 flex items-center justify-between">
<p className={`text-sm font-semibold ${isDark ? "text-[#dfe3ea]" : "text-[#1f2430]"}`}>
<p
className={`text-sm font-semibold ${isDark ? "text-[#dfe3ea]" : "text-[#1f2430]"}`}
>
{canvasWidth} x {canvasHeight}px
</p>
<button
onClick={onOpenCanvasSize}
className={`rounded-md border px-2 py-1 text-xs font-semibold ${
isDark ? "border-white/20 text-[#d7dae0]" : "border-black/20 text-[#1f2430]"
isDark
? "border-white/20 text-[#d7dae0]"
: "border-black/20 text-[#1f2430]"
}`}
>
{labels.resize}
@@ -106,7 +112,9 @@ export function EditorMobileSection(props: EditorMobileSectionProps) {
/>
</div>
{tool === "face" && (
<p className={`mt-2 text-[11px] ${isDark ? "text-[#9aa1ad]" : "text-[#6b7280]"}`}>
<p
className={`mt-2 text-[11px] ${isDark ? "text-[#9aa1ad]" : "text-[#6b7280]"}`}
>
{faceStatus === "unsupported"
? labels.faceMlFailedShort
: faceStatus === "detecting"
@@ -116,27 +124,35 @@ export function EditorMobileSection(props: EditorMobileSectionProps) {
)}
</div>
<div className={`mt-3 rounded-2xl border p-3 ${isDark ? "border-white/10 bg-[#2a2c31]" : "border-black/10 bg-white"}`}>
<div
className={`mt-3 rounded-2xl border p-3 ${isDark ? "border-white/10 bg-[#2a2c31]" : "border-black/10 bg-white"}`}
>
<div className="grid grid-cols-4 gap-2">
<button
type="button"
onClick={onImportImage}
className={`rounded-xl border px-2 py-3 text-[11px] font-semibold ${
isDark ? "border-white/20 bg-[#25272b] text-[#dfe3ea]" : "border-black/20 bg-[#f5f6f8] text-[#1f2430]"
isDark
? "border-white/20 bg-[#25272b] text-[#dfe3ea]"
: "border-black/20 bg-[#f5f6f8] text-[#1f2430]"
}`}
>
{labels.import}
</button>
{[labels.mood, labels.quick, labels.face, labels.decor].map((toolLabel) => (
<button
key={toolLabel}
className={`rounded-xl border px-2 py-3 text-[11px] font-semibold ${
isDark ? "border-white/20 bg-[#25272b] text-[#dfe3ea]" : "border-black/20 bg-[#f5f6f8] text-[#1f2430]"
}`}
>
{toolLabel}
</button>
))}
{[labels.mood, labels.quick, labels.face, labels.decor].map(
(toolLabel) => (
<button
key={toolLabel}
className={`rounded-xl border px-2 py-3 text-[11px] font-semibold ${
isDark
? "border-white/20 bg-[#25272b] text-[#dfe3ea]"
: "border-black/20 bg-[#f5f6f8] text-[#1f2430]"
}`}
>
{toolLabel}
</button>
),
)}
</div>
</div>
</section>