93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
"use client";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { expressionColors, isExpressionColor } from "@/lib/expressionColors";
|
|
import { motion } from "framer-motion";
|
|
import { CSSProperties } from "react";
|
|
import * as R from "remeda";
|
|
|
|
export default function Expressions({
|
|
values,
|
|
}: {
|
|
values: Record<string, number>;
|
|
}) {
|
|
const top3 = R.pipe(
|
|
values,
|
|
R.entries(),
|
|
R.sortBy(R.pathOr([1], 0)),
|
|
R.reverse(),
|
|
R.take(3)
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
"text-xs p-3 w-full border-t border-border flex flex-col md:flex-row gap-3 bg-stone-50 rounded-b-[7px]"
|
|
}
|
|
>
|
|
{top3.map(([key, value], index) => (
|
|
<div className={"w-full overflow-hidden"} key={index}>
|
|
<div
|
|
className={"flex items-center justify-between gap-1 font-mono pb-1"}
|
|
>
|
|
{/* <Badge
|
|
variant="outline"
|
|
className="font-medium truncate text-xs opacity-70 text-white"
|
|
style={
|
|
|
|
}
|
|
>
|
|
{key}
|
|
</Badge> */}
|
|
<div className="flex flex-row items-center gap-2 px-2">
|
|
<div
|
|
className="rounded-full w-4 h-4 opacity-70"
|
|
style={
|
|
{
|
|
backgroundColor: isExpressionColor(key)
|
|
? expressionColors[key]
|
|
: "var(--bg)",
|
|
} as CSSProperties
|
|
}
|
|
/>
|
|
<div className={"font-medium truncate"}>{key}</div>
|
|
<div className={"tabular-nums text-xs opacity-40"}>
|
|
{Math.round(100 * value)}%
|
|
</div>
|
|
</div>
|
|
|
|
{/* */}
|
|
</div>
|
|
{/* <div
|
|
className={"relative h-1"}
|
|
style={
|
|
{
|
|
"--bg": isExpressionColor(key)
|
|
? expressionColors[key]
|
|
: "var(--bg)",
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
<div
|
|
className={
|
|
"absolute top-0 left-0 size-full rounded-full opacity-10 bg-[var(--bg)]"
|
|
}
|
|
/>
|
|
<motion.div
|
|
className={
|
|
"absolute top-0 left-0 h-full bg-[var(--bg)] rounded-full"
|
|
}
|
|
initial={{ width: 0 }}
|
|
animate={{
|
|
width: `${R.pipe(
|
|
value,
|
|
R.clamp({ min: 0, max: 1 }),
|
|
(value) => `${value * 100}%`
|
|
)}`,
|
|
}}
|
|
/>
|
|
</div> */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|