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
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> |
|
); |
|
};
|
|
|