51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import Image from "next/image";
|
|
import CountChart from "./CountChart";
|
|
import { getSupabaseClient } from "@/lib/supabase";
|
|
|
|
const CountChartContainer = async () => {
|
|
const supabase = await getSupabaseClient();
|
|
const { count: boysCount } = await supabase
|
|
.from("Student")
|
|
.select("*", { count: "exact", head: true })
|
|
.eq("sex", "MALE");
|
|
|
|
const { count: girlsCount } = await supabase
|
|
.from("Student")
|
|
.select("*", { count: "exact", head: true })
|
|
.eq("sex", "FEMALE");
|
|
|
|
const boys = boysCount || 0;
|
|
const girls = girlsCount || 0;
|
|
|
|
return (
|
|
<div className="bg-white rounded-xl w-full h-full p-4">
|
|
{/* TITLE */}
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-lg font-semibold">Students</h1>
|
|
<Image src="/moreDark.png" alt="" width={20} height={20} />
|
|
</div>
|
|
{/* CHART */}
|
|
<CountChart boys={boys} girls={girls} />
|
|
{/* BOTTOM */}
|
|
<div className="flex justify-center gap-16">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="w-5 h-5 bg-lamaSky rounded-full" />
|
|
<h1 className="font-bold">{boys}</h1>
|
|
<h2 className="text-xs text-gray-300">
|
|
Boys ({Math.round((boys / (boys + girls)) * 100)}%)
|
|
</h2>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="w-5 h-5 bg-lamaYellow rounded-full" />
|
|
<h1 className="font-bold">{girls}</h1>
|
|
<h2 className="text-xs text-gray-300">
|
|
Girls ({Math.round((girls / (boys + girls)) * 100)}%)
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CountChartContainer;
|