90 lines
3.7 KiB
TypeScript
90 lines
3.7 KiB
TypeScript
import ModifyCharacterSheet from "./ModifyCharacterSheet";
|
|
import Image from "next/image";
|
|
import { cn, getPersonalityImageSrc } from "@/lib/utils";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Check, CheckCircle, CircleCheck } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { EmojiComponent } from "./EmojiImage";
|
|
|
|
interface SheetWrapperProps {
|
|
personality: IPersonality;
|
|
personalityIdState: string;
|
|
onPersonalityPicked: (personalityId: string) => void;
|
|
languageState: string;
|
|
disableButtons: boolean;
|
|
}
|
|
|
|
const SheetWrapper: React.FC<SheetWrapperProps> = ({
|
|
personality,
|
|
personalityIdState,
|
|
onPersonalityPicked,
|
|
languageState,
|
|
disableButtons,
|
|
}) => {
|
|
const isCurrentPersonality = personalityIdState === personality.personality_id;
|
|
return (
|
|
<ModifyCharacterSheet
|
|
key={personality.personality_id}
|
|
openPersonality={personality}
|
|
languageState={languageState}
|
|
isCurrentPersonality={isCurrentPersonality}
|
|
onPersonalityPicked={onPersonalityPicked}
|
|
disableButtons={disableButtons}
|
|
>
|
|
<Card
|
|
className={cn(
|
|
"p-0 rounded-3xl cursor-pointer shadow-lg transition-all hover:scale-103 flex flex-col",
|
|
personalityIdState === personality.personality_id
|
|
? "border-primary border-2"
|
|
: "hover:border-primary/50"
|
|
)}
|
|
// onClick={() => onPersonalityPicked(personality)}
|
|
>
|
|
<CardContent className="flex-shrink-0 p-0 h-[160px] sm:h-[180px] relative">
|
|
{personality.creator_id === null ? (
|
|
<Image
|
|
src={getPersonalityImageSrc(personality.key)}
|
|
alt={personality.key}
|
|
width={100}
|
|
height={180}
|
|
className="rounded-3xl rounded-br-none rounded-bl-none w-full h-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex flex-row items-center justify-center h-full">
|
|
<EmojiComponent personality={personality} />
|
|
</div>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant={isCurrentPersonality ? "default" : "outline"}
|
|
className={`absolute shadow-lg top-2 right-2 rounded-full h-9 w-9 p-0 ${isCurrentPersonality ? "bg-primary text-primary-foreground" : ""}`}
|
|
onClick={() => onPersonalityPicked(personality.personality_id!)}
|
|
aria-label={isCurrentPersonality ? "Deselect feature" : "Select feature"}
|
|
>
|
|
{true ? (
|
|
<Check className="h-4 w-4" strokeWidth={3} />
|
|
) : (
|
|
<CheckCircle className="h-4 w-4" strokeWidth={3} />
|
|
)}
|
|
</Button>
|
|
</CardContent>
|
|
<CardHeader className="flex-shrink-0 gap-0 px-4 py-2">
|
|
<CardTitle className="font-semibold text-md flex flex-row items-center gap-2">
|
|
{personality.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-sm font-normal">
|
|
{personality.subtitle}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</ModifyCharacterSheet>
|
|
);
|
|
};
|
|
|
|
export default SheetWrapper;
|