94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
'use client'
|
|
import { Box, Checkbox, Flex, Heading, IconButton, Tooltip } from "@radix-ui/themes";
|
|
import { useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
import { BackgroundProp } from "./BackgroundSelector";
|
|
import { CircleQuestionMarkIcon } from "lucide-react";
|
|
export interface EffectProp {
|
|
enableShadow: boolean;
|
|
shadowColor: string;
|
|
}
|
|
export default function EffectsPage({
|
|
effect,
|
|
setEffect,
|
|
background
|
|
}: {
|
|
effect: EffectProp;
|
|
setEffect: (e: EffectProp) => void;
|
|
background: BackgroundProp
|
|
}) {
|
|
const t = useTranslations("Effects");
|
|
|
|
// const [shadowValid, setShadowValid] = useState(true);
|
|
// useEffect(() => {
|
|
// setShadowValid(!background.image);
|
|
// }, [background])
|
|
|
|
return (
|
|
<Box className="p-4 border rounded-lg min-w-64 border-t-2 border-t-purple-500 shadow">
|
|
<Heading as="h2" size="4" className="font-medium text-lg">{t("title")}</Heading>
|
|
<Flex gap={"2"} p="2" direction={"column"}>
|
|
|
|
<Flex gap="2" align={"center"}>
|
|
<Checkbox checked={effect.enableShadow} onClick={(e) => setEffect({ ...effect, enableShadow: !effect.enableShadow })} />
|
|
{t("shadowOption")}
|
|
<input
|
|
type="color"
|
|
id="color-picker"
|
|
value={effect.shadowColor}
|
|
onChange={e => setEffect({ ...effect, shadowColor: e.target.value })}
|
|
className="w-1/3 h-8 rounded-md cursor-pointer"
|
|
/>
|
|
|
|
<input
|
|
type="text"
|
|
value={effect.shadowColor}
|
|
onChange={e => setEffect({ ...effect, shadowColor: e.target.value })}
|
|
className="w-1/3 h-8 rounded-md cursor-pointer pl-4"
|
|
/>
|
|
</Flex>
|
|
|
|
{/* <Flex gap="2" align={"center"}>
|
|
<Checkbox checked={backgroundType.includes("color")} onClick={(e) => handleBackgroundTypeChange("color")} className="cursor-pointer" />
|
|
<Heading as="h3" size={"3"}>{t("colorOption")}</Heading>
|
|
<Flex gap={"4"} >
|
|
<input
|
|
type="color"
|
|
id="color-picker"
|
|
value={color || "black"}
|
|
onChange={handleColorChange}
|
|
className="w-1/3 h-10 rounded-md cursor-pointer"
|
|
/>
|
|
|
|
{color && (<input
|
|
type="text"
|
|
value={color}
|
|
onChange={handleColorChange}
|
|
className="w-1/2 h-10 rounded-md cursor-pointer pl-4"
|
|
/>)}
|
|
</Flex>
|
|
</Flex>
|
|
|
|
<Flex gap="2" align={"center"}>
|
|
<Checkbox checked={backgroundType.includes("image")} onClick={(e) => handleBackgroundTypeChange("image")} className="cursor-pointer" />
|
|
<Heading as="h3" size={"3"}>{t("imageOption")}</Heading>
|
|
<Flex gap={"4"} >
|
|
<input
|
|
type="file"
|
|
id="file-upload"
|
|
accept="image/*"
|
|
onChange={handleImageUpload}
|
|
className="block w-full text-sm text-muted-foreground
|
|
file:mr-4 file:py-2 file:px-4
|
|
file:rounded-md file:border-0
|
|
file:text-sm file:font-semibold
|
|
file:bg-primary file:text-primary-foreground
|
|
hover:file:bg-primary/90"
|
|
/>
|
|
</Flex>
|
|
</Flex> */}
|
|
</Flex>
|
|
</Box>
|
|
);
|
|
}
|