Skip to content

Commit

Permalink
Refresh home and details page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Studio384
Studio384 committed Aug 10, 2023
1 parent bdc4b54 commit 566ff76
Show file tree
Hide file tree
Showing 2 changed files with 278 additions and 212 deletions.
231 changes: 132 additions & 99 deletions site/pages/icons/[slug].js
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
import React from "react";
import matter from "gray-matter";
import { Container } from "@mui/system";
import {
Box,
Button,
Card,
Chip,
Divider,
Grid,
Container,
IconButton,
Input,
Link,
Stack,
Typography
Typography,
useColorScheme
} from "@mui/joy";
import Head from "next/head";
import ValkyrieIcon from "@sippy-platform/valkyrie";
import * as Icons from "@sippy-platform/valkyrie";
import NextLink from "next/link";

function PostTemplate({ data, slug }) {
const { mode, setMode } = useColorScheme();
const frontmatter = data;

const icon = `vi${slug
Expand All @@ -35,106 +36,138 @@ function PostTemplate({ data, slug }) {
<meta name="description" content="The Valkyrie Icon set." />
<link rel="icon" href="/favicon.svg" />
</Head>
<Stack
direction="row"
spacing={1}
justifyContent="flex-start"
alignItems="center"
sx={{ py: 2 }}
>
<NextLink href="/">
<IconButton variant="outlined">
<ValkyrieIcon icon={Icons.viArrowLeft} />
</IconButton>
</NextLink>
<Typography
level="h1"
sx={{
display: "inline",
backgroundImage: "linear-gradient(135deg, #0061c9, #c455f7)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent"
}}
>
Valkyrie
</Typography>
</Stack>
<Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
<Typography level="h1" fontSize="xl3" fontWeight="xl">
{frontmatter.title}
</Typography>
</Box>
{(frontmatter.categories || frontmatter.tags) && (
<Box sx={{ display: "flex", gap: 0.5, alignItems: "center", mt: 2 }}>
{frontmatter.categories?.map(cat => (
<Chip variant="solid" color="primary" key={cat}>
{cat}
</Chip>
))}
{frontmatter.tags?.map(tag => (
<Chip key={tag}>{tag}</Chip>
))}
</Box>
)}
<Stack direction={{ xs: "column", md: "row" }} spacing={2} sx={{ pt: 2 }}>
<Card
variant="outlined"
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
backgroundColor: "#fdfdfd",
backgroundImage:
"radial-gradient(circle, #ddd 1px, rgba(0, 0, 0, 0) 1px)",
backgroundSize: "1rem 1rem",
backgroundPosition: "calc(.5rem - 1px) calc(.5rem - 1px)",
fontSize: "10rem",
width: "20rem",
height: "20rem"
}}

<Stack spacing={2} sx={{ py: 2 }}>
<Stack
direction="row"
spacing={1}
justifyContent="space-between"
alignItems="center"
>
<ValkyrieIcon icon={Icons[icon]} />
</Card>
<Card variant="outlined" sx={{ flexGrow: 1 }}>
<Typography level="h3" sx={{ mb: 3 }}>
<ValkyrieIcon icon={Icons[icon]} /> Heading icon
<Typography
level="h1"
sx={{
display: "inline",
backgroundImage: "linear-gradient(135deg, #0061c9, #c455f7)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent"
}}
>
Valkyrie
</Typography>
<Typography level="body-md" sx={{ mb: 3 }}>
<ValkyrieIcon icon={Icons[icon]} /> Inline icon
</Typography>
<Box sx={{ mb: 3, display: "flex", gap: 1 }}>
<Button startDecorator={<ValkyrieIcon icon={Icons[icon]} />}>
Button icon
</Button>
<IconButton color="primary" variant="soft">
<ValkyrieIcon icon={Icons[icon]} />
</IconButton>
<IconButton
variant="outlined"
size="sm"
onClick={() =>
setMode(
mode === "light" ? "dark" : mode === "dark" ? "system" : "light"
)
}
>
<ValkyrieIcon
icon={
mode === "light"
? Icons.viSun
: mode === "dark"
? Icons.viMoon
: Icons.viCircleHalfInner
}
/>
</IconButton>
</Stack>
<Stack
direction="row"
spacing={1}
justifyContent="space-between"
alignItems="center"
>
<Stack direction="row" alignContent="center" spacing={1}>
<Typography level="h2" fontSize="xl2" fontWeight="md">
<NextLink href="/">
<Link color="neutral">Icons</Link>
</NextLink>{" "}
<Typography fontWeight="xl">{frontmatter.title}</Typography>
</Typography>
</Stack>
</Stack>

{(frontmatter.categories || frontmatter.tags) && (
<Box sx={{ display: "flex", gap: 0.5, alignItems: "center" }}>
{frontmatter.categories?.map(cat => (
<Chip variant="solid" color="primary" size="sm" key={cat}>
{cat}
</Chip>
))}
{frontmatter.tags?.map(tag => (
<Chip key={tag} variant="outlined" size="sm">
{tag}
</Chip>
))}
</Box>
<Input
startDecorator={<ValkyrieIcon icon={Icons[icon]} />}
placeholder={frontmatter.title}
/>
</Card>
</Stack>
<Grid container spacing={2} sx={{ mt: 3 }}>
<Grid item xs={12} sm={6}>
<Typography level="h3" sx={{ mb: 2 }}>
HTML
</Typography>
<Card variant="outlined" sx={{ py: 2 }}>
<code>{`<i class="vi vi-${slug.replaceAll(" ", "-")}"></i>`}</code>
)}

<Stack direction={{ xs: "column", md: "row" }} spacing={2}>
<Card
variant="outlined"
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: 8,
backgroundImage:
"radial-gradient(circle, var(--joy-palette-neutral-500) 1px, rgba(0, 0, 0, 0) 1px)",
backgroundSize: "1rem 1rem",
backgroundPosition: "calc(.5rem - 1px) calc(.5rem - 1px)",
fontSize: "10rem",
width: "20rem",
height: "20rem"
}}
>
<ValkyrieIcon icon={Icons[icon]} />
</Card>
</Grid>
<Grid item xs={12} sm={6}>
<Typography level="h3" sx={{ mb: 2 }}>
React
</Typography>
<Card variant="outlined" sx={{ py: 2 }}>
<code>{`<ValkyrieIcon icon={${icon}} />`}</code>
<Card variant="outlined" sx={{ flexGrow: 1 }}>
<Typography level="h3" sx={{ mb: 3 }}>
<ValkyrieIcon icon={Icons[icon]} /> Heading icon
</Typography>
<Typography level="body-md" sx={{ mb: 3 }}>
<ValkyrieIcon icon={Icons[icon]} /> Inline icon
</Typography>
<Box sx={{ mb: 3, display: "flex", gap: 1 }}>
<Button startDecorator={<ValkyrieIcon icon={Icons[icon]} />}>
Button icon
</Button>
<IconButton color="primary" variant="soft">
<ValkyrieIcon icon={Icons[icon]} />
</IconButton>
</Box>
<Input
startDecorator={<ValkyrieIcon icon={Icons[icon]} />}
placeholder={frontmatter.title}
/>
</Card>
</Grid>
</Grid>
</Stack>
<Stack direction={{ xs: "column", md: "row" }} spacing={2}>
<Box sx={{ flexGrow: 1 }}>
<Typography level="h3" sx={{ mb: 2 }}>
HTML
</Typography>
<Card variant="outlined" sx={{ py: 2 }}>
<code>{`<i class="ai ai-${slug.replaceAll(
" ",
"-"
)}"></i>`}</code>
</Card>
</Box>
<Box sx={{ flexGrow: 1 }}>
<Typography level="h3" sx={{ mb: 2 }}>
React
</Typography>
<Card variant="outlined" sx={{ py: 2 }}>
<code>{`<ValkyrieIcon icon={${icon}} />`}</code>
</Card>
</Box>
</Stack>
</Stack>
</Container>
);
}
Expand Down
Loading

0 comments on commit 566ff76

Please sign in to comment.