Gitiles
Code Review Sign In
git.clicks.codes / Clicks / clicks.codes / 04e5e35b6693c466c79ca740920611abeaa45a65 / . / Components / Header.js
blob: f5e7bb7199307c541ad425f75a5938ff38980d6d [file] [log] [blame]
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]1import React, { useRef } from "react";
pineafane0283a82022-02-13 10:05:56 +0000[diff] [blame]2import Styles from '../styles/Components/header.module.css';
pineafan876af7d2021-10-14 20:31:21 +0100[diff] [blame]3import Head from 'next/head';
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]4import { useColorMode } from "theme-ui";
5import { useReward } from "react-rewards";
6import ScrollContainer from 'react-indiana-drag-scroll'
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]7
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]8function Header(props) {
9 const [ clickTotal, setClickTotal ] = React.useState(0);
10
11 const { reward: reward, isAnimating: isAnimating } = useReward('headerConfetti', 'confetti', {
12 elementSize: 10,
13 elementCount: 150,
14 startVelocity: 35,
15 lifetime: 300,
16 decay: 0.95,
17 spread: 170,
18 position: "absolute",
19 colors: ["#F27878", "#E5AB71", "#E5DC71", "#A1CC65", "#68D49E", "#71AFE5", "#6576CC", "#8D58B2", "#BF5E9F"]
20 });
21 const { reward: disappointment, isAnimating: isDisappointmentAnimating } = useReward('disappointmentConfetti', 'confetti', {
22 elementSize: 25,
23 elementCount: 1,
24 startVelocity: 25,
25 lifetime: 350,
26 decay: 0.95,
27 spread: 0,
28 position: "absolute",
29 colors: ["#E5AB71"]
30 });
31
32 function confetti() {
33 if (!isAnimating && !isDisappointmentAnimating && props.index) {
34 setClickTotal(clickTotal + 1);
pineafan9babd752022-10-21 21:47:52 +0100[diff] [blame]35 if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]36 disappointment();
37 } else {
38 reward();
39 }
40 }
pineafan9b1b68c2021-11-05 17:47:27 +0000[diff] [blame]41 }
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]42
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]43 return (
44 <div className={Styles.header} style={{
45 margin: "0",
46 minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",
47 }} id={props.id ? props.id : null}>
48 <div className={Styles.backgroundGradient} style={{
49 backgroundImage: `linear-gradient(69.44deg, #${props.gradient[0]} 0%, #${props.gradient[1]} 100%)`,
50 }} />
51 <Head>
52 <title>{props.name}</title>
53
54 <meta name="apple-mobile-web-app-capable" content="yes" />
55 <meta name="mobile-web-app-capable" content="yes" />
56 <meta name="viewport" content="width=device-width, minimal-ui" />
57
58 <meta name="title" content={props.name} />
59 <meta name="og:title" content={props.name} />
60 <meta name="description" content={props.embedDescription ? props.embedDescription : props.subtext} />
61 <meta name="og:description" content={props.embedDescription ? props.embedDescription : props.subtext} />
62 <meta name="author" content="Clicks" />
63 <meta name="og:author" content="Clicks" />
64 <meta name="image" content={props.embedImage} />
65 <meta name="og:image" content={props.embedImage} />
66
67 <meta name="theme-color" content={"#000000"} />
68 <meta name="og-color" content={"#" + props.gradient[1]} />
69 <meta name="msapplication-TileColor" content={"#000000"} />
70 </Head>
71 <img draggable={false} alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/${props.wave}.svg`} />
pineafand94d40e2022-10-23 19:55:29 +0100[diff] [blame]72 <div id="headerConfetti" />
73 <div id="disappointmentConfetti" />
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]74 <div className={Styles.panel}>
75 <div className={Styles.titleContainer}>
76 <div onClick={confetti}>
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]77 {
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]78 props.customImage?
79 <img height="64px" width="64px" alt={props.name} className={Styles.headerImage} style={{borderRadius: props.roundImage ? "100vw" : "0"}} src={props.customImage} />
80 : <></>
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]81 }
82 </div>
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]83 <h1 className={Styles.title}>{props.name}</h1>
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]84 </div>
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]85 <p className={Styles.subtext + " " + (props.buttons.length ? Styles.subtextExtra : null)}>{props.subtext}</p>
86 <a href="#skipNav" id="skipNav" style={{display: "none"}} />
87 { props.buttons.length ?
88 <div className={Styles.buttonOverflow}>
89 <img className={Styles.indicator + " " + Styles.leftArrow} draggable={false} alt="" src={`https://assets.clicks.codes/web/icons/arrow.svg`}/>
90 <ScrollContainer
91 vertical={false}
92 horizontal={true}
93 hideScrollbars={true}
94 nativeMobileScroll={true}
95 style={{borderRadius: "10px", height: "fit-content"}}
96 >
97 <div className={Styles.buttonLayout}>
98 {
99 props.buttons ? props.buttons.map((button, index) => {
100 return <a
101 key={index}
102 className={Styles.button}
103 style={{ backgroundColor: `#${button.color}`, color: `#${button.buttonText}` }}
104 href={button.link}
105 onClick={() => { if (button.id) { props.callback(button.id) } }}
106 target={button.target ? "_blank" : null}
107 draggable={false}
108 rel="noreferrer">
109 {button.text}
110 </a>
111 }) : null
112 }
113 </div>
114 </ScrollContainer>
115 <img className={Styles.indicator + " " + Styles.rightArrow} draggable={false} alt="" src={`https://assets.clicks.codes/web/icons/arrow.svg`}/>
116 </div> : <></>
117 }
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]118 </div>
pineafanff3d4522022-05-06 19:51:02 +0100[diff] [blame]119 </div>
120 )
pineafana5ce9102021-09-02 17:21:31 +0100[diff] [blame]121}
122
123export default Header;