first commit
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
import { CollaboratorServiceItems } from "@models/Collaborators.model";
|
||||
import style from "./SelectableServiceItem.module.css";
|
||||
import { formatPrice } from "@helpers/Numbers";
|
||||
import { useState } from "react";
|
||||
import classNames from "classnames";
|
||||
|
||||
export interface SelectableServiceItemProps {
|
||||
data: CollaboratorServiceItems;
|
||||
onChange?: (serviceId: string, active: boolean) => void;
|
||||
}
|
||||
|
||||
export default function SelectableServiceItem(
|
||||
props: SelectableServiceItemProps
|
||||
): React.ReactElement {
|
||||
const [active, setActive] = useState(props.data.active);
|
||||
|
||||
const getClassesNames = () => {
|
||||
const classList: classNames.ArgumentArray = [];
|
||||
|
||||
classList.push(style.selectableServiceItem);
|
||||
|
||||
if (active) {
|
||||
classList.push(style.selectableServiceItemActive);
|
||||
} else {
|
||||
classList.push(style.selectableServiceItemInactive);
|
||||
}
|
||||
return classNames(classList);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
setActive(!active);
|
||||
if (!props.onChange) {
|
||||
return;
|
||||
}
|
||||
props.onChange(props.data.id, !active);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={getClassesNames()} onClick={handleClick}>
|
||||
<h1>{props.data.name}</h1>
|
||||
<p>{props.data.description}</p>
|
||||
<span>{formatPrice(props.data.price)}</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user