filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

updated glyph view

Browse Source
This commit is contained in:
Aminejvm 2021-04-02 18:32:52 +01:00
parent b860987762
commit 7282a0d8c3
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/core/FontFrame/Views/Glyphs.js
View File

@ -14,22 +14,24 @@ const STYLES_GLYPHS_LETTER = css`
const STYLES_GLYPHS_GRID = css`
margin-top: -16px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
grid-template-rows: repeat(12, 1fr);
grid-column-gap: 28px;
grid-auto-rows: 0px;
overflow: hidden;
font-size: 32px;
`;
export default function Glyphs() {
const content = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 ?!()[]{}&*^%$#@~`;
const glyphs = React.useMemo(() => new Array(6).fill(content).join("").split(""), []);
const content = `ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890?!()[]{}&*^%$#@~`.split(
""
);
return (
<div css={STYLES_GLYPHS_WRAPPER}>
<div css={STYLES_GLYPHS_LETTER}>Aa</div>
<div css={STYLES_GLYPHS_GRID}>
{glyphs.map((letter, i) => (
{content.map((letter) => (
<div
key={letter + i}
key={letter}
css={css`
margin-top: 16px;
`}