devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: attach svgRef to SVG elements in Mascot sub-components

Browse Source 
The svgRef was created but never passed to the sub-component SVG
elements, meaning it would always be null when the animation hook
tries to use it. Now passed via SvgProps interface.
This commit is contained in:
Jannis Braun
2026-03-22 23:18:37 +01:00
parent 7d5b9c1eee
commit 386bd85c8d
1 changed files with 18 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/ui/Mascot.tsx
+18 -12
View File
@@ -15,9 +15,15 @@ interface MascotProps {
className?: string; className?: string;
} }
function IdleSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.idle; gradientId: string }) { interface SvgProps {
palette: (typeof MASCOT_PALETTES)[MascotState];
gradientId: string;
svgRef: React.RefObject<SVGSVGElement | null>;
}
function IdleSvg({ palette, gradientId, svgRef }: SvgProps) {
return ( return (
<svg viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%"> <svg ref={svgRef} viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%">
<defs> <defs>
<radialGradient id={gradientId} cx="38%" cy="30%" r="65%"> <radialGradient id={gradientId} cx="38%" cy="30%" r="65%">
<stop offset="0%" stopColor={palette.from} /> <stop offset="0%" stopColor={palette.from} />
@@ -67,9 +73,9 @@ function IdleSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.idle
); );
} }
function SleepingSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.sleeping; gradientId: string }) { function SleepingSvg({ palette, gradientId, svgRef }: SvgProps) {
return ( return (
<svg viewBox="0 0 220 130" aria-hidden="true" width="100%" height="100%"> <svg ref={svgRef} viewBox="0 0 220 130" aria-hidden="true" width="100%" height="100%">
<defs> <defs>
<radialGradient id={gradientId} cx="40%" cy="30%" r="65%"> <radialGradient id={gradientId} cx="40%" cy="30%" r="65%">
<stop offset="0%" stopColor={palette.from} /> <stop offset="0%" stopColor={palette.from} />
@@ -122,9 +128,9 @@ function SleepingSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.
); );
} }
function ExcitedSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.excited; gradientId: string }) { function ExcitedSvg({ palette, gradientId, svgRef }: SvgProps) {
return ( return (
<svg viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%"> <svg ref={svgRef} viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%">
<defs> <defs>
<radialGradient id={gradientId} cx="36%" cy="30%" r="65%"> <radialGradient id={gradientId} cx="36%" cy="30%" r="65%">
<stop offset="0%" stopColor={palette.from} /> <stop offset="0%" stopColor={palette.from} />
@@ -174,9 +180,9 @@ function ExcitedSvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.e
); );
} }
function LonelySvg({ palette, gradientId }: { palette: typeof MASCOT_PALETTES.lonely; gradientId: string }) { function LonelySvg({ palette, gradientId, svgRef }: SvgProps) {
return ( return (
<svg viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%"> <svg ref={svgRef} viewBox="0 0 200 200" aria-hidden="true" width="100%" height="100%">
<defs> <defs>
<radialGradient id={gradientId} cx="40%" cy="30%" r="65%"> <radialGradient id={gradientId} cx="40%" cy="30%" r="65%">
<stop offset="0%" stopColor={palette.from} /> <stop offset="0%" stopColor={palette.from} />
@@ -238,10 +244,10 @@ export function Mascot({ state, className }: MascotProps) {
return ( return (
<div ref={containerRef} role="presentation" className={classes} style={{ position: 'relative' }}> <div ref={containerRef} role="presentation" className={classes} style={{ position: 'relative' }}>
{state === 'idle' && <IdleSvg palette={palette} gradientId={gradientId} />} {state === 'idle' && <IdleSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
{state === 'sleeping' && <SleepingSvg palette={palette} gradientId={gradientId} />} {state === 'sleeping' && <SleepingSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
{state === 'excited' && <ExcitedSvg palette={palette} gradientId={gradientId} />} {state === 'excited' && <ExcitedSvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
{state === 'lonely' && <LonelySvg palette={palette} gradientId={gradientId} />} {state === 'lonely' && <LonelySvg palette={palette} gradientId={gradientId} svgRef={svgRef} />}
{state === 'sleeping' && ( {state === 'sleeping' && (
<div <div
data-mascot="z-container" data-mascot="z-container"