[V0_FILE]typescriptreact:file="gender-split-card.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { UserIcon as Male, UserIcon as Female } from "lucide-react" export default function GenderSplitCard() { const [malePercentage, setMalePercentage] = useState(50) const femalePercentage = 100 - malePercentage const handleSliderChange = (value: number[]) => { setMalePercentage(value[0]) } return (

Gender Split Adjust the target audience gender ratio for your product

Male: {malePercentage}%

Female: {femalePercentage}%

30 ? "text-white" : "text-gray-200"}`}> {malePercentage > 10 ? `${malePercentage}%` : ""} 30 ? "text-white" : "text-gray-200"}`}> {femalePercentage > 10 ? `${femalePercentage}%` : ""}

Male Audience

{malePercentage < 30 ? "Low priority" : malePercentage < 70 ? "Balanced approach" : "Primary focus"}

Female Audience

{femalePercentage < 30 ? "Low priority" : femalePercentage < 70 ? "Balanced approach" : "Primary focus"}

) }

About

About