refactor: enhance layout and spacing for product variant buttons in create and edit pages

This commit is contained in:
Yoga Pangestu 2026-08-01 14:46:58 +07:00
parent 841767d5b1
commit 0e96469cdd
2 changed files with 12 additions and 8 deletions

View File

@ -532,18 +532,19 @@ export default function ProductCreate({ categories }: Props) {
key={variantIndex} key={variantIndex}
className="space-y-4 rounded-lg border p-4" className="space-y-4 rounded-lg border p-4"
> >
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 className="font-medium"> <h4 className="font-medium">
Varian{' '} Varian{' '}
{variantIndex + 1} {variantIndex + 1}
</h4> </h4>
<div className="flex items-center gap-1"> <div className="flex flex-wrap items-center gap-1">
{!useSamePrice && ( {!useSamePrice && (
<> <>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
copyPrices( copyPrices(
variantIndex, variantIndex,
@ -562,6 +563,7 @@ export default function ProductCreate({ categories }: Props) {
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
pastePrices( pastePrices(
variantIndex, variantIndex,
@ -575,14 +577,14 @@ export default function ProductCreate({ categories }: Props) {
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
applyToAll( applyToAll(
variantIndex, variantIndex,
) )
} }
> >
Terapkan Terapkan ke Semua
ke Semua
</Button> </Button>
</> </>
)} )}

View File

@ -612,18 +612,19 @@ export default function ProductEdit({ product, categories }: Props) {
key={variantIndex} key={variantIndex}
className="space-y-4 rounded-lg border p-4" className="space-y-4 rounded-lg border p-4"
> >
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 className="font-medium"> <h4 className="font-medium">
Varian{' '} Varian{' '}
{variantIndex + 1} {variantIndex + 1}
</h4> </h4>
<div className="flex items-center gap-1"> <div className="flex flex-wrap items-center gap-1">
{!useSamePrice && ( {!useSamePrice && (
<> <>
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
copyPrices( copyPrices(
variantIndex, variantIndex,
@ -642,6 +643,7 @@ export default function ProductEdit({ product, categories }: Props) {
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
pastePrices( pastePrices(
variantIndex, variantIndex,
@ -655,14 +657,14 @@ export default function ProductEdit({ product, categories }: Props) {
type="button" type="button"
variant="outline" variant="outline"
size="sm" size="sm"
className="whitespace-nowrap"
onClick={() => onClick={() =>
applyToAll( applyToAll(
variantIndex, variantIndex,
) )
} }
> >
Terapkan Terapkan ke Semua
ke Semua
</Button> </Button>
</> </>
)} )}