143 lines
4.4 KiB
TypeScript
143 lines
4.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import TextInput from "./TextInput";
|
|
import Popover from "./Popover";
|
|
import { HexColorPicker } from "react-colorful";
|
|
import { useTranslation } from "next-i18next";
|
|
import IconGrid from "./IconGrid";
|
|
import clsx from "clsx";
|
|
|
|
type Props = {
|
|
alignment?: string;
|
|
color: string;
|
|
setColor: Function;
|
|
iconName?: string;
|
|
setIconName: Function;
|
|
weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
|
|
setWeight: Function;
|
|
reset: Function;
|
|
className?: string;
|
|
onClose: Function;
|
|
};
|
|
|
|
const IconPopover = ({
|
|
alignment,
|
|
color,
|
|
setColor,
|
|
iconName,
|
|
setIconName,
|
|
weight,
|
|
setWeight,
|
|
reset,
|
|
className,
|
|
onClose,
|
|
}: Props) => {
|
|
const { t } = useTranslation();
|
|
const [query, setQuery] = useState("");
|
|
|
|
return (
|
|
<Popover
|
|
onClose={() => onClose()}
|
|
className={clsx(
|
|
className,
|
|
"fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md"
|
|
)}
|
|
>
|
|
<div className="flex gap-2 h-full w-full">
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<TextInput
|
|
className="p-2 rounded w-full h-7 text-sm"
|
|
placeholder={t("search")}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
|
|
<div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
|
|
<IconGrid
|
|
query={query}
|
|
color={color}
|
|
weight={weight}
|
|
iconName={iconName}
|
|
setIconName={setIconName}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2 color-picker w-full">
|
|
<HexColorPicker color={color} onChange={(e) => setColor(e)} />
|
|
|
|
<div className="grid grid-cols-2 gap-1 text-sm">
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="regular"
|
|
checked={weight === "regular"}
|
|
onChange={() => setWeight("regular")}
|
|
/>
|
|
{t("regular")}
|
|
</label>
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="thin"
|
|
checked={weight === "thin"}
|
|
onChange={() => setWeight("thin")}
|
|
/>
|
|
{t("thin")}
|
|
</label>
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="light"
|
|
checked={weight === "light"}
|
|
onChange={() => setWeight("light")}
|
|
/>
|
|
{t("light_icon")}
|
|
</label>
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="bold"
|
|
checked={weight === "bold"}
|
|
onChange={() => setWeight("bold")}
|
|
/>
|
|
{t("bold")}
|
|
</label>
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="fill"
|
|
checked={weight === "fill"}
|
|
onChange={() => setWeight("fill")}
|
|
/>
|
|
{t("fill")}
|
|
</label>
|
|
<label className="flex items-center cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
className="radio radio-primary mr-2"
|
|
value="duotone"
|
|
checked={weight === "duotone"}
|
|
onChange={() => setWeight("duotone")}
|
|
/>
|
|
{t("duotone")}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="btn btn-ghost btn-sm mt-2 w-fit mx-auto"
|
|
onClick={reset as React.MouseEventHandler<HTMLDivElement>}
|
|
>
|
|
{t("reset_defaults")}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default IconPopover;
|