/*
import { useState } from "react";
import { Checkbox } from "../Checkbox/Checkbox";
import { CheckboxList } from "../Checkbox/[Link]";
import { useForm, FormProvider } from "react-hook-form";
import { Typography } from "../Typography";
type CheckboxCardProps = {
title: string;
description?: string;
checked: boolean;
onChangeHandle: (checked: boolean) => void;
};
const CheckboxCard = ({
title = "Device & Usage Report",
description = "Access device and usage reports",
checked = false,
onChangeHandle,
}: CheckboxCardProps) => {
const [isChecked, setIsChecked] = useState(checked);
const methods = useForm();
const checkboxList: CheckboxList[] = [
{
id: 1,
selected: isChecked,
visible: true,
value: "",
},
];
const handleCheckboxChange = (isChecked: boolean) => {
setIsChecked(isChecked);
onChangeHandle(isChecked);
};
return (
<FormProvider {...methods}>
<div className="w-screen h-screen flex flex-col justify-center">
<div className="p-4">
<div
className={`flex gap-2 p-4 border bg-primary-50 rounded-xl transition-
all duration-150 ease-in-out transform ${
isChecked
? " border-2 border-purple-600 scale-[1.03]"
: "border-gray-200"
}`}
>
<div>
<Checkbox
checkboxHeaderLabel=""
name="checkboxCard"
checkboxList={checkboxList}
control={[Link]}
variant="primary"
size="base"
onChange={(activeIds) =>
handleCheckboxChange([Link] > 0)
}
/>
</div>
<div className="flex flex-col justify-center">
<Typography
text={title}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-800" : "text-gray-700"}`}
className="font-medium"
/>
{description && (
<Typography
text={description}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-700" : "text-gray-600"}`}
className="font-normal"
/>
)}
</div>
</div>
</div>
</div>
</FormProvider>
);
};
export default CheckboxCard;
and what you should add in story:
//onChangeHandle: { action: "changed" },
/*
<div
className={`text-base font-medium font-inter ${
isChecked ? "text-primary-800" : "text-gray-700"
}`}
>
{title}
</div>
<div
className={`text-[15px] font-normal font-inter ${
isChecked ? "text-[rgba(105,65,198,1)]" : "text-gray-600"
}`}
>
{description}
</div>
*/
/*
your prev styling to make it responsive
<div className="w-screen h-screen flex flex-col justify-center">
<div className="p-4">
<div
className={` flex p-4 border bg-primary-50 rounded-xl transition-all
duration-150 ease-in-out transform ${isChecked ? " border-2 border-purple-600
scale-[1.03]" : "border-gray-200"}`}>
const handleChange = (activeIds: number[]) => {
setIsChecked([Link] > 0);
};
useEffect(() => {
setIsChecked(checked);
}, [checked]);
*/
//newest mihir contribution and meltem requests component without form provider
/*
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Checkbox } from "../Checkbox/Checkbox";
import { Typography } from "../Typography";
type CheckboxProps = {
title: string;
description?: string;
checked: boolean;
};
interface IFormInputs {
MyCheckbox: boolean;
}
const CheckboxCard = ({
title = "Device & Usage Report",
description = "Access device and usage reports",
checked = false,
}: CheckboxProps) => {
const [isChecked, setIsChecked] = useState(checked);
const { control,setValue } = useForm<IFormInputs>({
defaultValues: {
MyCheckbox: checked,
},
});
const handleChange = (activeIds: number[]) => {
const newCheckedState = [Link] > 0;
setIsChecked(newCheckedState);
setValue("MyCheckbox", newCheckedState);
};
useEffect(() => {
setIsChecked(checked);
setValue("MyCheckbox", checked);
}, [checked, setValue]);
return (
<div className="w-screen flex items-center p-4">
<div className="w-full max-w-4xl">
<div
className={`flex justify-start items-center p-4 border bg-primary-50
rounded-xl transition-all duration-150 ease-in-out transform ${isChecked ? "
border-2 border-purple-600 scale-[1.03]" : "border-gray-200"}`}
>
<div className="pb-2">
<Checkbox
name="MyCheckbox"
control={control}
checkboxList={[
{ id: 1, selected: isChecked, visible: true, value: "" },
]}
variant="primary"
size="base"
onChange={handleChange}
/>
</div>
<div className="flex flex-col justify-center">
<Typography
text={title}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-800" : "text-gray-700"}`}
className="font-medium"
/>
{description && (
<Typography
text={description}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-700" : "text-gray-600"}`}
className="font-normal"
/>
)}
</div>
</div>
</div>
</div>
);
};
export default CheckboxCard;
propa id ekle ve default title ve description vermene gerek yok.
componenti pr olarak attığın ve form provider kullandığın haline çevir ve pr gönder
*/
