andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scaffold out UI components

Browse Source
This commit is contained in:
rektdeckard
2020-07-21 23:07:36 -04:00
parent 016e6d987b
commit 19d9b8c7d2
24 changed files with 1063 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/App/App.css
View File

@@ -1,38 +1,62 @@
.App {
text-align: center;
body {
margin: 0px;
font-family: monospace;
}
.App-logo {
height: 40vmin;
pointer-events: none;
button, select {
margin: 4px;
padding: 8px;
border: 1px solid black;
border-radius: 24px;
background-color: white;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
button:focus, select:focus {
outline: none;
border: 1px solid violet;
border-radius: 24px;
}
.App-header {
background-color: #282c34;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
button:active {
background-color: lightblue;
}
.App-link {
color: #61dafb;
size: 1em;
input[type="color"] {
border: 1px solid black;
border-radius: 24px;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
input[type="color" i] {
-webkit-appearance: square-button;
width: 32px;
height: 32px;
}
#color-picker {
padding: 0px;
border-radius: 100%;
height: 32px;
width: 32px;
border: none;
outline: none;
-webkit-appearance: none;
}
#color-picker::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
/* input {
margin: 4px;
padding: 8px;
border: 2px solid black;
border-radius: 24px;
background-color: transparent;
}
input:focus {
outline: none;
border: 2px solid violet;
border-radius: 24px;
} */

28
src/components/App/App.tsx
View File

@@ -1,22 +1,18 @@
import React from "react";
import { Toolbar, IconGrid } from "../";
const App = () => {
import { Header, Toolbar, IconGrid, Footer } from "../";
import "./App.css";
const App: React.FC<any> = () => {
return (
<div>
<header>
<h1>Phosphor Icons</h1>
<a
href="https://play.google.com/store/apps/details?id=com.tobiasfried.phosphor"
target="_blank"
rel="noopener noreferrer"
>
on the play store
</a>
</header>
<Toolbar />
<IconGrid />
</div>
<>
<Header />
<main>
<Toolbar />
<IconGrid />
</main>
<Footer />
</>
);
};

33
src/components/ColorInput/ColorInput.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react";
import { useRecoilState } from "recoil";
import { iconColorAtom } from "../../state/atoms";
type ColorInputProps = {};
const ColorInput: React.FC<ColorInputProps> = () => {
const [color, setColor] = useRecoilState(iconColorAtom);
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {
target: { value: color },
} = event;
if (color[0] === "#") setColor(color);
};
return (
<div>
<label htmlFor="color-picker" hidden>
Icon Color
</label>
<input
id="color-picker"
type="color"
onChange={handleColorChange}
value={color}
/>
</div>
);
};
export default ColorInput;

6
src/components/Footer/Footer.css Normal file
View File

@@ -0,0 +1,6 @@
footer {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

23
src/components/Footer/Footer.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import { Droid } from "phosphor-react";
import "./Footer.css";
type FooterProps = {};
const Footer: React.FC<FooterProps> = () => {
return (
<footer>
<span role="img" aria-label="Emoji of female technologist, male technologist, and cat">👩🏻‍💻👨🏻‍💻🐱</span>
<div>Copyright © 2020 Phosphor Icons</div>
<div>
Phosphor Icons is designed by{" "}
<a href="https://helenazhang.com">Helena Zhang</a> & built by{" "}
<a href="https://tobiasfried.com">Tobias Fried</a>, with love.
</div>
<button style={{ display: "flex", alignItems: "center", padding: 8 }}>Phosphor for <Droid /></button>
</footer>
);
};
export default Footer;

8
src/components/Header/Header.css Normal file
View File

@@ -0,0 +1,8 @@
header {
display: flex;
align-items: center;
}
header > * {
flex: 1;
}

21
src/components/Header/Header.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from "react";
import "./Header.css";
type HeaderProps = {};
const Header: React.FC<HeaderProps> = () => {
return (
<header>
<div style={{ paddingLeft: 32 }}>
<h1>Phosphor Icons</h1>
</div>
<div style={{ paddingRight: 32, textAlign: "end" }}>
<button>Download All</button>
<button>Request</button>
<button>Donate</button>
</div>
</header>
);
};
export default Header;

3
src/components/IconGrid/IconGrid.css
View File

@@ -1,6 +1,7 @@
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
/* min-height: 100vh; */
}
.grid-item {
@@ -10,7 +11,7 @@
justify-content: center;
margin: 4px;
border-radius: 8px;
background-color: gainsboro;
background-color: white;
/* transition: background-color 0.5s ease; */
}

62
src/components/IconGrid/IconGrid.tsx
View File

@@ -3,7 +3,7 @@ import { useRecoilValue } from "recoil";
import { motion } from "framer-motion";
import { filteredQueryResultsSelector } from "../../state/selectors";
import { iconColorAtom, iconSizeAtom } from "../../state/atoms";
import { iconColorAtom, iconSizeAtom, styleQueryAtom } from "../../state/atoms";
import "./IconGrid.css";
type IconGridProps = {};
@@ -13,62 +13,30 @@ type IconGridProps = {};
// closed: { opacity: 0, x: "-100%" },
// }
const whileHover = {
boxShadow: "0 0 0 2px rgb(0, 0, 0)",
// scale: 1.2,
};
const transition = { duration: 0.2 };
const IconGrid: React.FC<IconGridProps> = () => {
const weight = useRecoilValue(styleQueryAtom);
const color = useRecoilValue(iconColorAtom);
const size = useRecoilValue(iconSizeAtom);
const filteredQueryResults = useRecoilValue(filteredQueryResultsSelector);
return (
<motion.div className="grid">
{filteredQueryResults.map((icon) => (
{filteredQueryResults.map(({ name, Icon }) => (
<motion.div
key={`ph-${icon.name}-${icon.style}`}
key={name}
className="grid-item"
whileHover={{ scale: 1.2, zIndex: 1, backgroundColor: "rgb(80, 220, 240)" }}
transition={{ duration: 0.2 }}
whileHover={whileHover}
transition={transition}
>
{/* <img
color={color}
style={{ height: size, width: size }}
src={icon.asset}
alt={`${icon.name} icon`}
width="100%"
/> */}
<svg
width={size}
height={size}
viewBox="0 0 16 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<title>ph-6-square</title>
<g
id="Page-1"
stroke="none"
strokeWidth="1"
fill="none"
fillRule="evenodd"
>
<g
id="REFACTOR---Testing-32-line-style-MEDIUM---REFACTOR"
transform="translate(-204.000000, -836.000000)"
>
<g
id="ph-6-square"
transform="translate(204.000000, 836.000000)"
>
<polygon id="Fill-1" points="0 16 16 16 16 0 0 0"></polygon>
<path
d="M12.5002,2 C13.3283424,2 14.0002,2.67185763 14.0002,3.5 L14.0002,3.5 L14.0002,12.5 C14.0002,13.3281424 13.3283424,14 12.5002,14 L12.5002,14 L3.5002,14 C2.67205763,14 2.0002,13.3281424 2.0002,12.5 L2.0002,12.5 L2.0002,3.5 C2.0002,2.67185763 2.67205763,2 3.5002,2 L3.5002,2 Z M12.5002,3 L3.5002,3 C3.22434237,3 3.0002,3.22414237 3.0002,3.5 L3.0002,3.5 L3.0002,12.5 C3.0002,12.7758576 3.22434237,13 3.5002,13 L3.5002,13 L12.5002,13 C12.7760576,13 13.0002,12.7758576 13.0002,12.5 L13.0002,12.5 L13.0002,3.5 C13.0002,3.22414237 12.7760576,3 12.5002,3 L12.5002,3 Z M8.68254638,4.56645635 C8.89513608,4.68915997 8.98352787,4.94440165 8.90359492,5.16757927 L8.86564365,5.24944638 L7.85282188,7.00392446 C8.29007993,6.97474335 8.73199934,7.0740957 9.12489386,7.30008038 L9.12489386,7.30008038 L9.29386898,7.40805384 C9.72888544,7.71376231 10.0373271,8.15855494 10.1734941,8.66683399 C10.3268496,9.23795093 10.2504388,9.85092548 9.94876178,10.3742416 C9.64716392,10.8973449 9.15475538,11.2690252 8.58226601,11.4223941 C8.0101937,11.5760061 7.39807854,11.5000007 6.87630614,11.1979196 C6.35246877,10.8966194 5.98037525,10.4044519 5.82663095,9.83188663 C5.67314747,9.25896983 5.74909436,8.64698709 6.05188686,8.12398186 C6.05369059,8.12086632 6.05550102,8.11775614 6.05731812,8.11465133 L7.99955635,4.74955362 C8.13759792,4.51039021 8.44338298,4.42841477 8.68254638,4.56645635 Z M8.62630614,8.16691962 C8.33337246,7.99843033 7.99451471,7.95640146 7.67522247,8.04267312 C7.35874418,8.12692081 7.08639562,8.33296658 6.91731314,8.62501814 C6.74908295,8.91559756 6.7070847,9.25402094 6.79249411,9.57283399 C6.87803784,9.89141061 7.08390359,10.1637089 7.37611814,10.3317869 C7.66663056,10.4999783 8.00495914,10.541988 8.32321337,10.456531 C8.64237347,10.3710285 8.91492409,10.1653016 9.08243822,9.8747584 C9.25053333,9.58320754 9.29287479,9.24334675 9.20763095,8.92588663 C9.12225886,8.60721321 8.91666229,8.33502286 8.62630614,8.16691962 Z"
id="Combined-Shape"
fill={color}
fillRule="nonzero"
></path>
</g>
</g>
</g>
</svg>
<p style={{ padding: 16 }}>{icon.name}</p>
<Icon color={color} size={size} weight={weight} />
<p>{name}</p>
</motion.div>
))}
</motion.div>

32
src/components/SearchInput/SearchInput.css Normal file
View File

@@ -0,0 +1,32 @@
.search-bar {
position: relative;
display: flex;
align-items: center;
width: 250px;
margin: 4px;
padding: 8px 16px;
border: 1px solid black;
border-radius: 24px;
background-color: white;
}
.search-bar:focus-within {
outline: none;
border: 1px solid violet;
border-radius: 24px;
}
.search-bar input {
flex: 1;
border: none;
margin-left: 8px;
padding: 2px 0px 0px;
}
.search-bar input:focus {
outline: none;
}
.search-bar input::placeholder {
color: black;
}

33
src/components/SearchInput/SearchInput.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react";
import { useRecoilState } from "recoil";
import { searchQueryAtom } from "../../state/atoms";
import { Search } from "phosphor-react";
import "./SearchInput.css";
type SearchInputProps = {};
const SearchInput: React.FC<SearchInputProps> = () => {
const [query, setQuery] = useRecoilState(searchQueryAtom);
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setQuery(event.target.value);
};
return (
<div className="search-bar">
<Search />
<label htmlFor="search-input" hidden>
Search for an icon
</label>
<input
id="search-input"
type="text"
value={query}
placeholder="Search for an icon"
onChange={handleSearchChange}
/>
</div>
);
};
export default SearchInput;

56
src/components/SizeInput/SizeInput.css Normal file
View File

@@ -0,0 +1,56 @@
.size-bar {
position: relative;
display: flex;
align-items: center;
width: 250px;
margin: 4px;
padding: 8px 16px;
border: 1px solid black;
border-radius: 24px;
background-color: white;
font-family: sans-serif;
font-size: 13.333px;
height: 20px;
}
.size-bar:focus-within {
outline: none;
border: 1px solid violet;
border-radius: 24px;
}
.size-bar input {
flex: 1;
margin-left: 16px;
border: none;
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
height: 1px; /* Specified height */
background: black; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
}
.size-bar input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 12px; /* Set a specific slider handle width */
height: 12px; /* Slider handle height */
background: black; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.size-bar input::-moz-range-thumb {
width: 12px; /* Set a specific slider handle width */
height: 12px; /* Slider handle height */
background: black; /* Green background */
cursor: pointer; /* Cursor on hover */
}
.size-bar input:focus {
outline: none;
}
.size-bar input::placeholder {
color: black;
}

38
src/components/SizeInput/SizeInput.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from "react";
import { useRecoilState } from "recoil";
import { iconSizeAtom } from "../../state/atoms";
import "./SizeInput.css";
type SizeInputProps = {};
const SizeInput: React.FC<SizeInputProps> = () => {
const [size, setSize] = useRecoilState(iconSizeAtom);
const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const {
target: { value },
} = event;
const sizeInput = parseInt(value);
if (sizeInput > 0) setSize(sizeInput);
};
return (
<div className="size-bar">
<label htmlFor="size-input">{`Size: ${size}px`}</label>
<input
id="size-input"
value={size}
type="range"
title={size.toString()}
min={16}
max={96}
onChange={handleSizeChange}
step={4}
/>
</div>
);
};
export default SizeInput;

37
src/components/StyleInput/StyleInput.tsx Normal file
View File

@@ -0,0 +1,37 @@
import React from "react";
import { useRecoilState } from "recoil";
import { styleQueryAtom } from "../../state/atoms";
import { IconStyle } from "../../lib";
type StyleInputProps = {};
const StyleInput: React.FC<StyleInputProps> = () => {
const [style, setStyle] = useRecoilState(styleQueryAtom);
const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setStyle(event.target.value as IconStyle);
};
return (
<div>
<label htmlFor="style-input" hidden>
Icon Size
</label>
<select
id="style-input"
value={style?.toString()}
onChange={handleStyleChange}
>
<option value={IconStyle.THIN}>Thin</option>
<option value={IconStyle.LIGHT}>Light</option>
<option value={IconStyle.REGULAR}>Regular</option>
<option value={IconStyle.BOLD}>Bold</option>
<option value={IconStyle.FILL}>Fill</option>
<option value={IconStyle.DUOTONE}>Duotone</option>
</select>
</div>
);
};
export default StyleInput;

11
src/components/Toolbar/Toolbar.css
View File

@@ -0,0 +1,11 @@
.toolbar {
position: sticky;
top: 0px;
padding: 8px;
background-color: #f2f2f2;
border: 1px 0px 1px solid black;
z-index: 2px;
display: flex;
justify-content: center;
align-items: center;
}

55
src/components/Toolbar/Toolbar.tsx
View File

@@ -1,54 +1,19 @@
import React from "react";
import { useRecoilState } from "recoil";
import { searchQueryAtom, styleQueryAtom, iconSizeAtom, iconColorAtom } from "../../state/atoms";
import { IconStyle } from "../../lib/Icon";
import { SearchInput, SizeInput, StyleInput, ColorInput } from "../";
import "./Toolbar.css";
type ToolbarProps = {}
type ToolbarProps = {};
const Toolbar: React.FC<ToolbarProps> = () => {
const [query, setQuery] = useRecoilState(searchQueryAtom);
const [style, setStyle] = useRecoilState(styleQueryAtom);
const [size, setSize] = useRecoilState(iconSizeAtom);
const [color, setColor] = useRecoilState(iconColorAtom);
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setQuery(event.target.value);
};
const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setStyle(event.target.value as IconStyle);
};
const handleSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { target: { value }} = event;
const sizeInput = parseInt(value);
if (sizeInput > 0) setSize(sizeInput);
}
void(color)
const handleColorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const { target: { value: color }} = event;
if (color[0] === "#") setColor(color);
}
return (
<div style={{ position: "sticky", top: 0, padding: 8, backgroundColor: "white", zIndex: 1.1 }}>
<input value={query} onChange={handleSearchChange} />
<select value={style?.toString()} onChange={handleStyleChange}>
<option value={""}>All</option>
<option value={IconStyle.THIN}>Thin</option>
<option value={IconStyle.LIGHT}>Light</option>
<option value={IconStyle.REGULAR}>Regular</option>
<option value={IconStyle.BOLD}>Bold</option>
<option value={IconStyle.FILL}>Fill</option>
<option value={IconStyle.DUOTONE}>Duotone</option>
</select>
<input value={size} type="range" min={12} max={256} onChange={handleSizeChange}/>
<input type="color" onChange={handleColorChange}/>
<div className="toolbar">
<StyleInput />
<SearchInput />
<SizeInput />
<ColorInput />
</div>
);
}
};
export default Toolbar;
export default Toolbar;

6
src/components/index.ts
View File

@@ -1,4 +1,10 @@
export { default as App } from "./App/App";
export { default as Header } from "./Header/Header";
export { default as IconGrid } from "./IconGrid/IconGrid";
export { default as IconGridUV } from "./IconGrid/IconGridUV";
export { default as Toolbar } from "./Toolbar/Toolbar";
export { default as ColorInput } from "./ColorInput/ColorInput";
export { default as SearchInput } from "./SearchInput/SearchInput";
export { default as SizeInput } from "./SizeInput/SizeInput";
export { default as StyleInput } from "./StyleInput/StyleInput";
export { default as Footer } from "./Footer/Footer";