96 lines
3.2 KiB
JavaScript
96 lines
3.2 KiB
JavaScript
import CanvasContext from "./Context/canvasContext/CanvasContext";
|
|
import { Button } from "./ui/button";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "./ui/select";
|
|
import { useContext } from "react";
|
|
|
|
const aspectRatios = [
|
|
{ value: "1:1", label: "Square (1:1)" },
|
|
{ value: "4:3", label: "Standard (4:3)" },
|
|
{ value: "3:2", label: "Classic (3:2)" },
|
|
{ value: "16:9", label: "Widescreen (16:9)" },
|
|
{ value: "9:16", label: "Portrait (9:16)" },
|
|
{ value: "21:9", label: "Ultrawide (21:9)" },
|
|
{ value: "32:9", label: "Super Ultrawide (32:9)" },
|
|
{ value: "1.85:1", label: "Cinema Standard (1.85:1)" },
|
|
{ value: "2.39:1", label: "Anamorphic Widescreen (2.39:1)" },
|
|
{ value: "2.76:1", label: "Ultra Panavision 70 (2.76:1)" },
|
|
{ value: "5:4", label: "Large Format (5:4)" },
|
|
{ value: "7:5", label: "Artistic Format (7:5)" },
|
|
{ value: "11:8.5", label: "Letter Size (11:8.5)" },
|
|
{ value: "3:4", label: "Portrait (3:4)" },
|
|
{ value: "1.91:1", label: "Facebook Ads (1.91:1)" },
|
|
];
|
|
|
|
export function ActionButtons() {
|
|
const { setCanvasRatio, canvasRatio } = useContext(CanvasContext);
|
|
const handleRatioChange = (newRatio) => {
|
|
setCanvasRatio(newRatio);
|
|
};
|
|
return (
|
|
<div className="absolute top-4 right-0 z-50 flex items-center gap-2 bg-white rounded-l-[16px]">
|
|
<div className="px-2 py-2">
|
|
<div className="w-full">
|
|
<Select onValueChange={handleRatioChange} value={canvasRatio}>
|
|
<SelectTrigger className="w-full text-xs font-bold">
|
|
<SelectValue placeholder="Select aspect ratio" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{aspectRatios.map((ratio) => (
|
|
<SelectItem
|
|
key={ratio.value}
|
|
value={ratio.value}
|
|
className="text-xs font-bold"
|
|
>
|
|
{ratio.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
<div className="mr-5">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="rounded-[10px] border-[#6A47ED] border-[0.5px] bg-[#F5F2FF]"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="21"
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M10.1288 13.041V1"
|
|
stroke="#6A47ED"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M13.0448 10.1143L10.1288 13.0423L7.21277 10.1143"
|
|
stroke="#6A47ED"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
<path
|
|
d="M14.62 5.50879C18.199 5.83879 19.5 7.17879 19.5 12.5088C19.5 19.6088 17.189 19.6088 10.25 19.6088C3.309 19.6088 1 19.6088 1 12.5088C1 7.17879 2.3 5.83879 5.88 5.50879"
|
|
stroke="#6A47ED"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|