56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { EnglishCopy } from "@/utils/i18n";
|
|
import SheetWrapper from "./SheetWrapper";
|
|
|
|
interface CharacterSectionProps {
|
|
allPersonalities: IPersonality[];
|
|
languageState: string;
|
|
personalityIdState: string;
|
|
onPersonalityPicked: (personalityIdPicked: string) => void;
|
|
title: string;
|
|
disableButtons: boolean;
|
|
selectedFilters: PersonalityFilter[];
|
|
}
|
|
|
|
const CharacterSection = ({
|
|
allPersonalities,
|
|
languageState,
|
|
personalityIdState,
|
|
onPersonalityPicked,
|
|
title,
|
|
disableButtons,
|
|
selectedFilters,
|
|
}: CharacterSectionProps) => {
|
|
const filteredPersonalities = allPersonalities.filter((personality) => {
|
|
return selectedFilters.every((filter) => {
|
|
return personality[filter] === true;
|
|
});
|
|
});
|
|
|
|
if (filteredPersonalities.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<p className="text-sm text-gray-600 self-start flex flex-row items-center gap-2">
|
|
<span>{title}</span>
|
|
</p>
|
|
<div className="w-full">
|
|
<div className="grid grid-cols-2 lg:grid-cols-4 md:gap-6 gap-4">
|
|
{filteredPersonalities.map((personality, index) => (
|
|
<SheetWrapper
|
|
languageState={languageState}
|
|
key={index + personality.personality_id!}
|
|
personality={personality}
|
|
personalityIdState={personalityIdState}
|
|
onPersonalityPicked={onPersonalityPicked}
|
|
disableButtons={disableButtons}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CharacterSection;
|