You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

33 lines
1010 B

import React, { useEffect, useState } from "react";
import projectorIcon from "../../../../assets/icons/projector.svg";
import lightIcon from "../../../../assets/icons/light.svg";
import _ from "lodash";
export default function Header() {
return (
<header className="container flex flex-row justify-between z-20 transform -translate-y-24">
{[32, 17, 0, -17, -32].map((light, index) => (
<Light degree={light} key={index} />
))}
</header>
);
}
const Light = ({ degree }) => {
return (
<div
className="flex flex-col items-center relative"
style={{ transform: `rotate(${degree}deg)` }}
draggable={false}
>
<img src={projectorIcon} alt="" className="w-12 h-12" draggable={false} />
<img
draggable={false}
src={lightIcon}
alt=""
className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
style={{ transform: `scale(6) translateY(24%)`, pointerEvents : 'none' }}
/>
</div>
);
};