File size: 3,535 Bytes
c30ea2a | 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 | import React from "react";
import { cn } from "@/lib/utils";
interface AlignSelectorProps {
value: "left" | "center" | "right";
onChange: (value: "left" | "center" | "right") => void;
}
const AlignSelector: React.FC<AlignSelectorProps> = ({ value, onChange }) => {
const layouts = [
{
value: "left",
icon: (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="15" cy="24" r="6" className="fill-current" />
<rect x="27" y="21" width="15" height="2" className="fill-current" />
<rect x="27" y="25" width="12" height="2" className="fill-current" />
<rect x="27" y="29" width="13" height="2" className="fill-current" />
</svg>
),
tooltip: "左对齐",
},
{
value: "center",
icon: (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="24" cy="15" r="6" className="fill-current" />
<rect
x="16.5"
y="27"
width="15"
height="2"
className="fill-current"
/>
<rect x="18" y="31" width="12" height="2" className="fill-current" />
<rect x="17" y="35" width="14" height="2" className="fill-current" />
</svg>
),
tooltip: "居中",
},
{
value: "right",
icon: (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="33" cy="24" r="6" className="fill-current" />
<rect x="6" y="21" width="15" height="2" className="fill-current" />
<rect x="9" y="25" width="12" height="2" className="fill-current" />
<rect x="8" y="29" width="13" height="2" className="fill-current" />
</svg>
),
tooltip: "右对齐",
},
];
return (
<div className="grid grid-cols-3 gap-3">
{layouts.map((layout) => (
<button
key={layout.value}
onClick={() => onChange(layout.value as "left" | "center" | "right")}
title={layout.tooltip}
className={cn(
"group relative flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all duration-200",
"hover:scale-[1.02] active:scale-[0.98]",
value === layout.value
? "border-primary bg-primary/5 text-primary shadow-sm"
: "border-transparent bg-secondary/40 text-muted-foreground hover:bg-secondary hover:text-foreground"
)}
>
{/* Icon wrapper to control size */}
<div className="w-10 h-10 flex items-center justify-center">
{React.cloneElement(layout.icon as React.ReactElement, {
width: "100%",
height: "100%",
className: "fill-current"
})}
</div>
{/* <span className="text-[10px] mt-2 font-medium opacity-80">
{layout.tooltip}
</span> */}
{value === layout.value && (
<div className="absolute inset-0 rounded-xl ring-2 ring-primary ring-offset-2 ring-offset-background opacity-0 animate-in fade-in zoom-in-95 duration-200 fill-mode-forwards" />
)}
</button>
))}
</div>
);
};
export default AlignSelector;
|