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