mirror of
https://github.com/ThomasJockin/readexpro.git
synced 2024-09-11 10:26:46 +03:00
153 lines
3.1 KiB
JavaScript
153 lines
3.1 KiB
JavaScript
import { useContext } from "react";
|
|
import useTypeChoices from "../lib/useTypeChoices";
|
|
import styled from "@emotion/styled";
|
|
import { useState, useEffect } from "react";
|
|
import useVariableFont from "react-variable-fonts";
|
|
import Markdown from "markdown-to-jsx";
|
|
import texts from "../data/texts";
|
|
import Page from "./Page";
|
|
import RangeSlider from "./RangeSlider";
|
|
|
|
const initialSettings = {
|
|
LXND: 0
|
|
};
|
|
|
|
const Tester = ({ weight, lxnd }) => {
|
|
const { axis, setAxis, customStyles } = useContext(useTypeChoices);
|
|
|
|
switch (weight) {
|
|
case "default":
|
|
lxnd = 0;
|
|
break;
|
|
case "Regular":
|
|
lxnd = 0;
|
|
break;
|
|
case "Deca":
|
|
lxnd = 0;
|
|
break;
|
|
case "Exa":
|
|
lxnd = 40;
|
|
break;
|
|
case "Giga":
|
|
lxnd = 56;
|
|
break;
|
|
case "Mega":
|
|
lxnd = 64;
|
|
break;
|
|
case "Peta":
|
|
lxnd = 72;
|
|
break;
|
|
case "Tera":
|
|
lxnd = 80;
|
|
break;
|
|
case "Zetta":
|
|
lxnd = 100;
|
|
break;
|
|
default:
|
|
lxnd = axis.LXND;
|
|
break;
|
|
}
|
|
|
|
const style = {
|
|
fontVariationSettings: `'LXND' ${lxnd}`
|
|
};
|
|
|
|
const exampleCSS = `h1, p { font-variation-settings: 'LXND' ${axis.LXND}; }`;
|
|
return (
|
|
<Container>
|
|
{weight && (
|
|
<Weight style={{ ...style }}>
|
|
{weight} • LXND {lxnd}
|
|
</Weight>
|
|
)}
|
|
<Title style={{ ...style }}>LEXEND</Title>
|
|
|
|
{!weight && (
|
|
<Controls>
|
|
<p style={{ ...style }} />
|
|
<label htmlFor="lxnd-axis">Variable Width + Bounding Box</label>
|
|
<RangeSlider
|
|
id="lxnd-axis"
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={axis.LXND}
|
|
onChange={({ target }) => setAxis({ LXND: target.value })}
|
|
/>
|
|
<label htmlFor="lxnd-axis">Variable Font Settings for CSS</label>
|
|
<pre>
|
|
<code>{exampleCSS}</code>
|
|
</pre>
|
|
</Controls>
|
|
)}
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
const Container = styled("section")`
|
|
padding: 1.618rem 1.618rem;
|
|
`;
|
|
const Weight = styled("span")`
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
letter-spacing: 2px;
|
|
`;
|
|
|
|
const Controls = styled("nav")`
|
|
max-width: 800px;
|
|
padding: 1rem 0.618rem;
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 0;
|
|
margin-bottom: 1.618rem;
|
|
@media (max-width: 960px) {
|
|
max-width: 100%;
|
|
}
|
|
input {
|
|
cursor: grab;
|
|
width: 100%;
|
|
}
|
|
label {
|
|
display: block;
|
|
text-transform: uppercase;
|
|
font-size: 0.718rem;
|
|
letter-spacing: 2px;
|
|
margin: 2.618rem 0 0.618rem;
|
|
}
|
|
@media (max-width: 960px) {
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
const H1 = styled("h1")`
|
|
font-size: 5.4vw !important;
|
|
line-height: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: normal;
|
|
span {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
border: 1px dashed rgba(0, 0, 0, 0.12);
|
|
}
|
|
& + p {
|
|
margin-left: 0.392rem;
|
|
}
|
|
@media (max-width: 960px) {
|
|
font-size: 12vw !important;
|
|
}
|
|
`;
|
|
|
|
const Title = ({ children, ...props }) => (
|
|
<H1>
|
|
{children.split("").map((child, i) => (
|
|
<span key={`${child}-${i}`} {...props}>
|
|
{child}
|
|
</span>
|
|
))}
|
|
</H1>
|
|
);
|
|
|
|
export default Tester;
|