42 lines
1.7 KiB
TypeScript
42 lines
1.7 KiB
TypeScript
/**
|
|
* StreakFlame — a vivid two-tone flame for the sādhana streak badge: a warm
|
|
* orange body with an inner gold flame. Pass `muted` for a zero / broken
|
|
* streak (greyed out). Size it with a height/size class.
|
|
*/
|
|
export function StreakFlame({
|
|
className,
|
|
muted = false,
|
|
}: {
|
|
className?: string;
|
|
muted?: boolean;
|
|
}) {
|
|
const outer = muted
|
|
? ["#c2c6cd", "#9aa0a8", "#868c95"]
|
|
: ["#ff9d2e", "#ff5722", "#e23a0e"];
|
|
const inner = muted ? ["#dde0e4", "#bcc0c6"] : ["#ffe08a", "#ffb01f"];
|
|
// One flame renders at a time, so fixed gradient ids are fine.
|
|
return (
|
|
<svg viewBox="0 0 24 24" className={className} role="img" aria-label="Streak">
|
|
<defs>
|
|
<linearGradient id="streak-flame-outer" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor={outer[0]} />
|
|
<stop offset="0.55" stopColor={outer[1]} />
|
|
<stop offset="1" stopColor={outer[2]} />
|
|
</linearGradient>
|
|
<linearGradient id="streak-flame-inner" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor={inner[0]} />
|
|
<stop offset="1" stopColor={inner[1]} />
|
|
</linearGradient>
|
|
</defs>
|
|
<path
|
|
fill="url(#streak-flame-outer)"
|
|
d="M13.6 1.8c0.2 2.6 2 4.1 3.4 5.9c1.5 1.9 2.5 4 2.5 6.3c0 4.2-3.4 7.2-7.5 7.2c-4.1 0-7.5-3-7.5-7.2c0-2.1 0.9-3.9 2.3-5.3c0.1 1 0.6 1.9 1.4 2.5c-0.4-2.6 0.5-5.2 2.3-7c1-1 2.3-1.8 3.1-3.1c0.2-0.4 0.4-0.9 0.5-1.3z"
|
|
/>
|
|
<path
|
|
fill="url(#streak-flame-inner)"
|
|
d="M12.4 9.6c0.7 1 1.9 1.9 2.6 3c0.6 0.9 0.9 1.9 0.9 2.9c0 2.2-1.8 3.8-3.9 3.8c-2.1 0-3.7-1.6-3.7-3.6c0-1.6 0.9-2.7 1.9-3.7c0.1 0.6 0.4 1.1 0.9 1.5c-0.2-1.4 0.2-2.6 1-3.4c0.2-0.2 0.3-0.3 0.4-0.5z"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|