114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import {
|
|
ArrowCircleUpRight,
|
|
ArrowCircleDown,
|
|
MegaphoneSimple,
|
|
HandHeart,
|
|
} from "@phosphor-icons/react";
|
|
|
|
import Banner from "@/components/Banner";
|
|
|
|
import { ReactComponent as PhosphorLogo } from "@/assets/phosphor-logo.svg";
|
|
import { ReactComponent as PaperClipsTwo } from "@/assets/paperclips-2.svg";
|
|
import { ReactComponent as PaperClipsThree } from "@/assets/paperclips-3.svg";
|
|
import { ReactComponent as IPad } from "@/assets/ipad.svg";
|
|
import { ReactComponent as IPadSpec } from "@/assets/ipad-spec.svg";
|
|
import { ReactComponent as Map } from "@/assets/map.svg";
|
|
import { ReactComponent as MapSpec } from "@/assets/map-spec.svg";
|
|
import { ReactComponent as Synth } from "@/assets/synth.svg";
|
|
import { ReactComponent as SynthSpec } from "@/assets/synth-spec.svg";
|
|
|
|
import { Watch, WatchSpec } from "./dynamic/Watch";
|
|
|
|
import Links from "@/components/Links";
|
|
import "./Header.css";
|
|
|
|
type HeaderProps = {};
|
|
|
|
const handleGetStarted = () =>
|
|
window.open(
|
|
"https://github.com/phosphor-icons/homepage#phosphor-icons",
|
|
"_blank",
|
|
"noopener noreferrer"
|
|
);
|
|
|
|
const handleScrollToIcons = () =>
|
|
document
|
|
.getElementById("toolbar")
|
|
?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
|
|
const Header = (_: HeaderProps) => {
|
|
return (
|
|
<header>
|
|
<Banner.Container>
|
|
<Banner id={"2.1.0"}>
|
|
<div className="message">
|
|
<MegaphoneSimple size={32} mirrored />
|
|
<small>
|
|
Phosphor v2.1 is out, adding 268 new icons and some general
|
|
revisions. Check our{" "}
|
|
<a href="https://github.com/phosphor-icons/homepage/releases">
|
|
release notes
|
|
</a>{" "}
|
|
to see what's changed!
|
|
</small>
|
|
</div>
|
|
</Banner>
|
|
<Banner id={"buymeacoffee2"}>
|
|
<div className="message">
|
|
<HandHeart size={32} mirrored />
|
|
<small>
|
|
We are now processing donations via{" "}
|
|
<a href="https://www.buymeacoffee.com/phosphoricons">
|
|
Buy Me a Coffee
|
|
</a>
|
|
! Your one-time or recurring contribution does a lot to keep us
|
|
going. Please show us some support if you can!
|
|
</small>
|
|
</div>
|
|
</Banner>
|
|
</Banner.Container>
|
|
<div className="header-contents">
|
|
<div className="illustrations-top">
|
|
<PhosphorLogo id="logo" />
|
|
|
|
<PaperClipsThree id="paperclips-three" />
|
|
|
|
<IPadSpec className="ipad" />
|
|
<IPad className="ipad inspectable xray" />
|
|
</div>
|
|
<div className="intro">
|
|
<h2>
|
|
Phosphor is a flexible icon family for interfaces, diagrams,
|
|
presentations — whatever, really.
|
|
</h2>
|
|
<div className="button-container">
|
|
<button className="main-button" onClick={handleGetStarted}>
|
|
<ArrowCircleUpRight size={24} />
|
|
Get started
|
|
</button>
|
|
<button className="main-button" onClick={handleScrollToIcons}>
|
|
<ArrowCircleDown size={24} />
|
|
Explore icons
|
|
</button>
|
|
</div>
|
|
<Links />
|
|
</div>
|
|
<div className="illustrations-bottom">
|
|
<MapSpec className="map" />
|
|
<Map className="map inspectable xray" />
|
|
|
|
<SynthSpec className="synth" />
|
|
<Synth className="synth inspectable xray" />
|
|
|
|
<WatchSpec className="watch" />
|
|
<Watch className="watch inspectable xray" />
|
|
|
|
<PaperClipsTwo id="paperclips" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|