Untitled
return ( <Card className="relative border-0 bg-transparent shadow-none w-[460px] min-w-[460px]"> <CardContent className="p-0"> <ChartContainer config={chartConfig} className="relative w-full aspect-square"> <RadialBarChart width="100%" height="100%" data={chartData} startAngle={90} endAngle={90 - (progress * 3.6)} innerRadius="65%" outerRadius="90%" barSize={12} > <PolarRadiusAxis tick={false} axisLine={false} tickLine={false} stroke="none" /> <RadialBar background={false} dataKey="value" cornerRadius={15} className="stroke-none" /> </RadialBarChart> <div className="absolute inset-0 flex items-center justify-center cursor-pointer group" onClick={handleClick} > <div className="relative perspective-1000 w-[57%] h-[57%]"> <div className={cn( "absolute w-full h-full rounded-full transition-transform duration-700 transform-style-preserve-3d", isFlipped && "rotate-y-180" )}> <div className="absolute w-full h-full rounded-full backface-hidden"> <div className={cn( "absolute inset-0 rounded-full", isDarkMode ? "opacity-[0.15]" : "opacity-[0.55]" )} style={{ backgroundColor: bgColor }} /> <div className="absolute inset-0 flex items-center justify-center"> <span className="text-2xl font-medium text-foreground"> {displayName} </span> </div> </div> <div className={cn( "absolute w-full h-full rounded-full backface-hidden rotate-y-180 flex flex-col items-center justify-center p-4", isDarkMode ? "bg-zinc-800/90 text-zinc-100" : "bg-zinc-100/90 text-zinc-800" )} > {prediction ? ( <div className="flex flex-col items-center space-y-2"> <Clock className={cn( "w-6 h-6", getPredictionColor(prediction.predicted_full_time) )} /> <p className={cn( "text-sm font-medium text-center", getPredictionColor(prediction.predicted_full_time) )}> Full by {formatPredictionTime(prediction.predicted_full_time)} </p> <Button onClick={handleRedirect} size="sm" className="w-32 text-xs mt-2 transition-all hover:ring-2 hover:ring-primary/50 hover:ring-offset-2 hover:ring-offset-background" variant="outline" > {backContent.buttonText} </Button> </div> ) : ( <div className="flex flex-col items-center space-y-2"> <Frown className="w-6 h-6 text-muted-foreground" /> <p className="text-sm text-center mb-2">No prediction available</p> <Button onClick={handleRedirect} size="sm" className="w-32 text-xs transition-all hover:ring-2 hover:ring-primary/50 hover:ring-offset-2 hover:ring-offset-background" variant="outline" > {backContent.buttonText} </Button> </div> )} </div> </div> </div> </div> </ChartContainer> </CardContent> </Card> ) }
Leave a Comment