265 lines
8.3 KiB
TypeScript
265 lines
8.3 KiB
TypeScript
import React, { useState } from "react";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
|
||
import markerPurple from "../../assets/marker-purple.svg";
|
||
import paperclips from "../../assets/paperclips.svg";
|
||
import tablet from "../../assets/tablet.svg";
|
||
import tabletSpec from "../../assets/tablet-spec.svg";
|
||
import billiardBall from "../../assets/billiard-ball.svg";
|
||
import billiardBallSpec from "../../assets/billiard-ball-spec.svg";
|
||
import warning from "../../assets/warning.svg";
|
||
import warningSpec from "../../assets/warning-spec.svg";
|
||
import cuttingMat from "../../assets/cutting-mat.svg";
|
||
import cuttingMatSpec from "../../assets/cutting-mat-spec.svg";
|
||
import receipt from "../../assets/receipt.svg";
|
||
import receiptSpec from "../../assets/receipt-spec.svg";
|
||
import calculator from "../../assets/calculator.svg";
|
||
import calculatorSpec from "../../assets/calculator-spec.svg";
|
||
import "./Header.css";
|
||
import { ArrowUpRightCircle } from "phosphor-react";
|
||
|
||
type HeaderProps = {};
|
||
|
||
const variants = {
|
||
hidden: { opacity: 0, transition: { duration: 0.2 } },
|
||
visible: { opacity: 1, transition: { duration: 0.2 } },
|
||
};
|
||
|
||
const handleGetStarted = () => {
|
||
window.open("https://github.com/rektdeckard/phosphor-web#phosphor-icons");
|
||
};
|
||
|
||
const handleScrollToIcons = () => {
|
||
document
|
||
.getElementById("toolbar")
|
||
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||
};
|
||
|
||
const Header: React.FC<HeaderProps> = () => {
|
||
const [hovered, setHovered] = useState<string | false>(false);
|
||
const clearHover = () => setHovered(false);
|
||
// const handleScrollToIcons = () => {};
|
||
|
||
return (
|
||
<header>
|
||
<motion.div
|
||
className="image-container"
|
||
variants={variants}
|
||
initial="visible"
|
||
// animate="visible"
|
||
transition={{ duration: 2 }}
|
||
>
|
||
<img src={markerPurple} id="marker-purple" />
|
||
<img src={paperclips} id="paperclips" />
|
||
<AnimatePresence>
|
||
{hovered === "tablet" ? (
|
||
<motion.img
|
||
id="tablet"
|
||
key="tablet-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("tablet")}
|
||
onHoverEnd={clearHover}
|
||
src={tabletSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="tablet"
|
||
key="tablet"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("tablet")}
|
||
// onHoverEnd={clearHover}
|
||
src={tablet}
|
||
/>
|
||
)}
|
||
{hovered === "billiard-ball" ? (
|
||
<motion.img
|
||
id="billiard-ball"
|
||
key="billiard-ball-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("billiard-ball")}
|
||
onHoverEnd={clearHover}
|
||
src={billiardBallSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="billiard-ball"
|
||
key="billiard-ball"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("billiard-ball")}
|
||
// onHoverEnd={clearHover}
|
||
src={billiardBall}
|
||
/>
|
||
)}
|
||
{hovered === "warning" ? (
|
||
<motion.img
|
||
id="warning"
|
||
key="warning-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("warning")}
|
||
onHoverEnd={clearHover}
|
||
src={warningSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="warning"
|
||
key="warning"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("warning")}
|
||
// onHoverEnd={clearHover}
|
||
src={warning}
|
||
/>
|
||
)}
|
||
{hovered === "cutting-mat" ? (
|
||
<motion.img
|
||
id="cutting-mat"
|
||
key="cutting-mat-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("cutting-mat")}
|
||
onHoverEnd={clearHover}
|
||
src={cuttingMatSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="cutting-mat"
|
||
key="cutting-mat"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("cutting-mat")}
|
||
// onHoverEnd={clearHover}
|
||
src={cuttingMat}
|
||
/>
|
||
)}
|
||
{hovered === "receipt" ? (
|
||
<motion.img
|
||
id="receipt"
|
||
key="receipt-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("receipt")}
|
||
onHoverEnd={clearHover}
|
||
src={receiptSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="receipt"
|
||
key="receipt"
|
||
className="inspectable"
|
||
initial="visible"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("receipt")}
|
||
// onHoverEnd={clearHover}
|
||
src={receipt}
|
||
/>
|
||
)}
|
||
{hovered === "calculator" ? (
|
||
<motion.img
|
||
id="calculator"
|
||
key="calculator-spec"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
// onHoverStart={() => setHovered("calculator")}
|
||
onHoverEnd={clearHover}
|
||
src={calculatorSpec}
|
||
/>
|
||
) : (
|
||
<motion.img
|
||
id="calculator"
|
||
key="calculator"
|
||
className="inspectable"
|
||
initial="hidden"
|
||
animate="visible"
|
||
exit="hidden"
|
||
variants={variants}
|
||
onHoverStart={() => setHovered("calculator")}
|
||
// onHoverEnd={clearHover}
|
||
src={calculator}
|
||
/>
|
||
)}
|
||
</AnimatePresence>
|
||
<div className="intro">
|
||
<h2>
|
||
Phosphor Icons is a flexible icon family for interfaces, diagrams,
|
||
presentations – whatever really.
|
||
</h2>
|
||
<div style={{ display: "flex" }}>
|
||
<button className="main-button" onClick={handleGetStarted}>
|
||
Get started{" "}
|
||
<ArrowUpRightCircle size={24} weight="fill" style={{ marginLeft: 12 }} />
|
||
</button>
|
||
|
||
<button className="main-button" onClick={handleScrollToIcons}>
|
||
{/* <ArrowUpRightCircle size={24} style={{ marginRight: 12 }} />{" "} */}
|
||
Explore icons
|
||
</button>
|
||
</div>
|
||
<div className="links">
|
||
<a
|
||
className="nav-link"
|
||
href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
|
||
>
|
||
Docs
|
||
</a>
|
||
<a className="nav-link" href="#">
|
||
Download
|
||
</a>
|
||
<a
|
||
className="nav-link"
|
||
href="https://github.com/rektdeckard/phosphor-web/issues"
|
||
>
|
||
Request
|
||
</a>
|
||
<a className="nav-link" href="#">
|
||
Donate
|
||
</a>
|
||
<a
|
||
className="nav-link"
|
||
href="https://github.com/rektdeckard/phosphor-web"
|
||
>
|
||
Github
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</header>
|
||
);
|
||
};
|
||
|
||
export default Header;
|