Header+Footer: add empty img alt-text to satisfy Lighthouse
This commit is contained in:
rektdeckard
@@ -1,5 +1,6 @@
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ArrowUpRightCircle } from "phosphor-react";
|
||||
|
||||
import markerPurple from "../../assets/marker-purple.svg";
|
||||
import paperclips from "../../assets/paperclips.svg";
|
||||
@@ -16,7 +17,6 @@ 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 = {};
|
||||
|
||||
@@ -38,7 +38,6 @@ const handleScrollToIcons = () => {
|
||||
const Header: React.FC<HeaderProps> = () => {
|
||||
const [hovered, setHovered] = useState<string | false>(false);
|
||||
const clearHover = () => setHovered(false);
|
||||
// const handleScrollToIcons = () => {};
|
||||
|
||||
return (
|
||||
<header>
|
||||
@@ -49,195 +48,41 @@ const Header: React.FC<HeaderProps> = () => {
|
||||
// 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>
|
||||
<img src={markerPurple} id="marker-purple" alt="" />
|
||||
<img src={paperclips} id="paperclips" alt="" />
|
||||
<div className="intro">
|
||||
<h2>
|
||||
Phosphor Icons is a flexible icon family for interfaces, diagrams,
|
||||
presentations – whatever really.
|
||||
presentations — whatever really.
|
||||
</h2>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ display: "flex", flexWrap: "wrap" }}>
|
||||
<button className="main-button" onClick={handleGetStarted}>
|
||||
Get started{" "}
|
||||
<ArrowUpRightCircle size={24} weight="fill" style={{ marginLeft: 12 }} />
|
||||
<ArrowUpRightCircle
|
||||
size={24}
|
||||
weight="fill"
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
Go to docs
|
||||
</button>
|
||||
|
||||
<button className="main-button" onClick={handleScrollToIcons}>
|
||||
{/* <ArrowUpRightCircle size={24} style={{ marginRight: 12 }} />{" "} */}
|
||||
<ArrowUpRightCircle
|
||||
size={24}
|
||||
weight="fill"
|
||||
style={{ marginRight: 12 }}
|
||||
/>
|
||||
Explore icons
|
||||
</button>
|
||||
</div>
|
||||
<div className="links">
|
||||
<a
|
||||
{/* <a
|
||||
className="nav-link"
|
||||
href="https://github.com/rektdeckard/phosphor-web#phosphor-icons"
|
||||
>
|
||||
Docs
|
||||
</a>
|
||||
</a> */}
|
||||
<a className="nav-link" href="#">
|
||||
Download
|
||||
Download all
|
||||
</a>
|
||||
<a
|
||||
className="nav-link"
|
||||
@@ -256,6 +101,180 @@ const Header: React.FC<HeaderProps> = () => {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="tablet"
|
||||
key="tablet"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("tablet")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={tablet}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<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}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="warning"
|
||||
key="warning"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("warning")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={warning}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<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}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="receipt"
|
||||
key="receipt"
|
||||
className="inspectable"
|
||||
initial="visible"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("receipt")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={receipt}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
{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}
|
||||
alt=""
|
||||
/>
|
||||
) : (
|
||||
<motion.img
|
||||
id="calculator"
|
||||
key="calculator"
|
||||
className="inspectable"
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
variants={variants}
|
||||
onHoverStart={() => setHovered("calculator")}
|
||||
// onHoverEnd={clearHover}
|
||||
src={calculator}
|
||||
alt=""
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</header>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user