fix(vibe): let ambient profile aura cross track rows
This commit is contained in:
@@ -31,17 +31,8 @@ export function VibeAura({ profile, ambient = false }: { profile: VibeProfile; a
|
|||||||
'--vibe-core-opacity': ambient ? '0.38' : '1',
|
'--vibe-core-opacity': ambient ? '0.38' : '1',
|
||||||
} as CSSProperties;
|
} as CSSProperties;
|
||||||
|
|
||||||
return (
|
const aura = (
|
||||||
<div
|
<div className="grid h-16 w-16 place-items-center rounded-full">
|
||||||
className={ambient
|
|
||||||
? 'group absolute left-1/2 top-[58%] z-0 grid h-16 w-16 -translate-x-1/2 -translate-y-1/2 scale-[21.6] cursor-help place-items-center rounded-full opacity-50 focus:outline-none'
|
|
||||||
: 'group relative grid h-16 w-16 shrink-0 place-items-center rounded-full focus:outline-none'}
|
|
||||||
style={style}
|
|
||||||
role="img"
|
|
||||||
tabIndex={0}
|
|
||||||
aria-label={`Current Vibe: ${energyLabel} energy and ${discoveryLabel} discovery`}
|
|
||||||
title={`Current Vibe: ${energyLabel} energy, ${discoveryLabel} discovery`}
|
|
||||||
>
|
|
||||||
<div className="vibe-aura-halo" />
|
<div className="vibe-aura-halo" />
|
||||||
<div className="vibe-aura-orbit vibe-aura-orbit-one" />
|
<div className="vibe-aura-orbit vibe-aura-orbit-one" />
|
||||||
<div className="vibe-aura-orbit vibe-aura-orbit-two" />
|
<div className="vibe-aura-orbit vibe-aura-orbit-two" />
|
||||||
@@ -58,4 +49,34 @@ export function VibeAura({ profile, ambient = false }: { profile: VibeProfile; a
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (ambient) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="group absolute left-1/2 top-[58%] z-20 h-16 w-16 -translate-x-1/2 -translate-y-1/2 cursor-help rounded-full focus:outline-none"
|
||||||
|
style={style}
|
||||||
|
role="img"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={`Current Vibe: ${energyLabel} energy and ${discoveryLabel} discovery`}
|
||||||
|
title={`Current Vibe: ${energyLabel} energy, ${discoveryLabel} discovery`}
|
||||||
|
>
|
||||||
|
<div className="pointer-events-none absolute inset-0 scale-[21.6] opacity-50 mix-blend-screen">
|
||||||
|
{aura}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="group relative grid h-16 w-16 shrink-0 place-items-center rounded-full focus:outline-none"
|
||||||
|
style={style}
|
||||||
|
role="img"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label={`Current Vibe: ${energyLabel} energy and ${discoveryLabel} discovery`}
|
||||||
|
title={`Current Vibe: ${energyLabel} energy, ${discoveryLabel} discovery`}
|
||||||
|
>
|
||||||
|
{aura}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -186,7 +186,7 @@ export default function Vibe() {
|
|||||||
|
|
||||||
// ---- Active session ----
|
// ---- Active session ----
|
||||||
return (
|
return (
|
||||||
<PageContainer width="sm" className="relative isolate overflow-hidden py-6">
|
<PageContainer width="sm" className="relative isolate py-6">
|
||||||
<VibeAura profile={profile} ambient />
|
<VibeAura profile={profile} ambient />
|
||||||
<div className="relative z-10 space-y-6">
|
<div className="relative z-10 space-y-6">
|
||||||
<header className="flex items-center justify-between">
|
<header className="flex items-center justify-between">
|
||||||
|
|||||||
Reference in New Issue
Block a user