Skip to content

Commit 6483e6e

Browse files
emilkowalskiemilkowalski
committed
Add first working snippet
1 parent c2e956b commit 6483e6e

File tree

16 files changed

+158
-38
lines changed

16 files changed

+158
-38
lines changed

‎components/ContextMenu/ContextMenu.js

+18-8
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import { styled } from "stitches.config";
22
import { keyframes } from "@stitches/react";
3+
import { createToast } from "vercel-toast";
34
import * as ContextMenu from "@radix-ui/react-context-menu";
45

5-
export default ({ children, stitchesStyling }) => {
6-
const copyToClipboard = async (value) => {
7-
await navigator.clipboard.writeText(location.href);
8-
console.log("Page URL copied to clipboard");
6+
export default ({ children, stitchesStyling, cssStyling, scssStyling }) => {
7+
const copyToClipboard = async (styling) => {
8+
try {
9+
await navigator.clipboard.writeText(styling);
10+
createToast("Copied styles to clipboard", {
11+
timeout: 3000,
12+
});
13+
} catch {
14+
createToast("Failed to copy", {
15+
timeout: 3000,
16+
type: "error",
17+
});
18+
}
919
};
20+
1021
return (
1122
<ContextMenu.Root>
1223
<ContextMenu.Trigger>{children}</ContextMenu.Trigger>
1324
<Content>
14-
<Item onSelect={() => copyToClipboard(stitchesStyling)}>CSS</Item>
15-
<Item onSelect={() => console.log("cut")}>SCSS</Item>
16-
<Item onSelect={() => console.log("copy")}>Stitches</Item>
17-
<Item onSelect={() => console.log("paste")}>Styled Components</Item>
25+
<Item onSelect={() => copyToClipboard(cssStyling)}>CSS</Item>
26+
<Item onSelect={() => copyToClipboard(scssStyling)}>SCSS</Item>
27+
<Item onSelect={() => copyToClipboard(stitchesStyling)}>Stitches</Item>
1828
</Content>
1929
</ContextMenu.Root>
2030
);

‎components/Footer/Footer.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react";
2+
import { styled } from "stitches.config";
3+
import Separator from "@components/Separator";
4+
import Stack from "@components/Stack";
5+
6+
const Footer = () => {
7+
return (
8+
<footer>
9+
<Stack>
10+
<Separator />
11+
<Paragraph>
12+
Built by{" "}
13+
<Link href="https://twitter.com/emilkowalski_" target="_blank">
14+
Emil
15+
</Link>{" "}
16+
</Paragraph>
17+
</Stack>
18+
</footer>
19+
);
20+
};
21+
22+
const Paragraph = styled("p", {
23+
fontSize: 14,
24+
color: "$gray",
25+
display: "block",
26+
textAlign: "center",
27+
});
28+
29+
const Link = styled("a", {
30+
textDecoration: "none",
31+
color: "$white",
32+
display: "inline-block",
33+
});
34+
35+
export default Footer;

‎components/Footer/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Footer";

‎components/Grid/Grid.js

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
// TODO: Temporary component to show how it might look like.
2-
import GridItem from "./components/GridItem";
3-
41
import { styled } from "stitches.config";
2+
53
import snippets from "@components/Snippets";
4+
import GridItem from "./components/GridItem";
5+
import ContextMenu from "@components/ContextMenu";
66

77
const Grid = ({ children }) => {
8-
console.log(snippets);
98
return (
109
<Wrapper>
11-
{snippets.map(({ component: Component, stitches }) => (
12-
<GridItem stitchesStyling={stitches}>
13-
<Component />
14-
</GridItem>
10+
{snippets.map(({ component: Component, stitchesStyling, cssStyling, scssStyling }) => (
11+
<ContextMenu stitchesStyling={stitchesStyling} cssStyling={cssStyling} scssStyling={scssStyling} key={cssStyling}>
12+
<GridItem key={stitchesStyling}>
13+
<Component />
14+
</GridItem>
15+
</ContextMenu>
1516
))}
1617
</Wrapper>
1718
);

‎components/Grid/components/GridItem.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import { styled } from "stitches.config";
22

3-
import ContextMenu from "@components/ContextMenu";
4-
53
const GridItem = ({ children, stitchesStyling }) => {
6-
return (
7-
<ContextMenu stitchesStyling={stitchesStyling}>
8-
<Wrapper>{children}</Wrapper>
9-
</ContextMenu>
10-
);
4+
return <Wrapper>{children}</Wrapper>;
115
};
126

137
const Wrapper = styled("div", {

‎components/Header/Header.js

+22-3
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,24 @@ import { styled } from "stitches.config";
66
const Header = () => {
77
return (
88
<Wrapper as="header">
9-
<Logo>UI Snippets</Logo>
9+
<Logo href="/">UI Snippets</Logo>
10+
<GithubLink href="https://github.com/">
11+
<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M12 3c-4.973 0-9 4.13-9 9.228 0 4.083 2.576 7.532 6.154 8.754.45.081.618-.196.618-.438 0-.22-.01-.946-.01-1.719-2.262.427-2.847-.565-3.027-1.084-.101-.265-.54-1.084-.923-1.303-.315-.173-.764-.6-.01-.612.708-.011 1.214.67 1.383.946.81 1.396 2.104 1.004 2.621.762.079-.6.315-1.004.574-1.235-2.003-.23-4.095-1.026-4.095-4.556 0-1.003.349-1.834.922-2.48-.09-.23-.404-1.176.09-2.445 0 0 .754-.242 2.475.946a8.159 8.159 0 012.25-.312c.765 0 1.53.104 2.25.312 1.722-1.2 2.475-.946 2.475-.946.495 1.269.18 2.215.09 2.445.574.646.923 1.465.923 2.48 0 3.541-2.104 4.326-4.106 4.556.326.289.607.842.607 1.707 0 1.235-.011 2.227-.011 2.538 0 .242.169.53.619.438a9.036 9.036 0 004.439-3.366A9.402 9.402 0 0021 12.228C21 7.129 16.973 3 12 3z"
16+
></path>
17+
</svg>
18+
</GithubLink>
1019
</Wrapper>
1120
);
1221
};
1322

1423
const Wrapper = styled(Container, {
1524
position: "sticky",
16-
top: "0",
17-
height: "64px",
25+
top: 0,
26+
height: 100,
1827
display: "flex",
1928
alignItems: "center",
2029
justifyContent: "space-between",
@@ -29,4 +38,14 @@ const Logo = styled("a", {
2938
display: "inline-block",
3039
});
3140

41+
const GithubLink = styled("a", {
42+
color: "$white",
43+
opacity: 0.6,
44+
transition: "opacity 0.2s ease",
45+
46+
"&:hover": {
47+
opacity: 1,
48+
},
49+
});
50+
3251
export default Header;

‎components/Seperator/Seperator.js renamed to ‎components/Separator/Separator.js

File renamed without changes.

‎components/Separator/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./Separator";

‎components/Seperator/index.js

-1
This file was deleted.

‎components/Snippets/UnderlineLeftRight.js

+57-6
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ const Wrapper = styled("a", {
1616
position: "absolute",
1717
width: "100%",
1818
transform: "scaleX(0)",
19-
height: "1px",
19+
height: 1,
2020
top: "110%",
21-
left: "0",
21+
left: 0,
2222
backgroundColor: "hsl(193, 95%, 71%)",
2323
transformOrigin: "bottom right",
2424
transition: "transform .4s cubic-bezier(.86,0,.07,1)",
@@ -31,19 +31,18 @@ const Wrapper = styled("a", {
3131
});
3232

3333
export const stitchesStyling = `
34-
const Wrapper = styled("a", {
34+
const ExampleWrapper = styled("a", {
3535
display: "inline-block",
3636
position: "relative",
37-
cursor: "pointer",
3837
3938
"&:after": {
4039
content: "",
4140
position: "absolute",
4241
width: "100%",
4342
transform: "scaleX(0)",
44-
height: "1px",
43+
height: 1,
4544
top: "110%",
46-
left: "0",
45+
left: 0,
4746
backgroundColor: "hsl(193, 95%, 71%)",
4847
transformOrigin: "bottom right",
4948
transition: "transform .4s cubic-bezier(.86,0,.07,1)",
@@ -54,3 +53,55 @@ const Wrapper = styled("a", {
5453
transformOrigin: "bottom left",
5554
},
5655
});`;
56+
57+
export const cssStyling = `
58+
.exampleClass {
59+
display: inline-block;
60+
position: relative;
61+
color: hsl(222, 25%, 14%);
62+
}
63+
64+
.exampleClass::after {
65+
content: '';
66+
position: absolute;
67+
width: 100%;
68+
transform: scaleX(0);
69+
height: 2px;
70+
bottom: 0;
71+
left: 0;
72+
background-color: hsl(243, 80%, 62%);
73+
transform-origin: bottom right;
74+
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
75+
}
76+
77+
.exampleClass:hover::after {
78+
transform: scaleX(1);
79+
transform-origin: bottom left;
80+
}
81+
`;
82+
83+
export const scssStyling = `
84+
.exampleClass {
85+
display: inline-block;
86+
position: relative;
87+
color: hsl(222, 25%, 14%);
88+
89+
&::after {
90+
content: '';
91+
position: absolute;
92+
width: 100%;
93+
transform: scaleX(0);
94+
height: 2px;
95+
bottom: 0;
96+
left: 0;
97+
background-color: hsl(243, 80%, 62%);
98+
transform-origin: bottom right;
99+
transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
100+
}
101+
102+
&:hover::after {
103+
transform: scaleX(1);
104+
transform-origin: bottom left;
105+
}
106+
}
107+
`;

‎components/Snippets/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import UnderlineLeftRight, { stitchesStyling } from "./UnderlineLeftRight";
1+
import UnderlineLeftRight, { stitchesStyling, cssStyling, scssStyling } from "./UnderlineLeftRight";
22

3-
const allSnippets = [{ component: UnderlineLeftRight, stitches: stitchesStyling }];
3+
const allSnippets = [{ component: UnderlineLeftRight, stitchesStyling, cssStyling, scssStyling }];
44

55
export default allSnippets;

‎components/Stack/Stack.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { styled } from "stitches.config.js";
22

33
const Stack = styled("div", {
44
"> * + *": {
5-
marginTop: "$4",
5+
marginTop: "$5",
66
},
77
});
88

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@stitches/react": "^0.2.0-canary.5",
1313
"next": "10.2.3",
1414
"react": "17.0.2",
15-
"react-dom": "17.0.2"
15+
"react-dom": "17.0.2",
16+
"vercel-toast": "^1.5.3"
1617
}
1718
}

‎pages/_app.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { globalStyles } from "@styles/global";
2+
import "vercel-toast/dist/vercel-toast.css";
23

34
import Header from "@components/Header";
45

‎pages/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import Container from "@components/Container";
22
import Grid from "@components/Grid";
33
import Heading from "@components/Heading";
4-
import Seperator from "@components/Seperator";
4+
import Seperator from "@components/Separator";
55
import Stack from "@components/Stack";
6+
import Footer from "@components/Footer";
67

78
export default function Home() {
89
return (
@@ -13,6 +14,7 @@ export default function Home() {
1314
</Heading>
1415
<Seperator />
1516
<Grid />
17+
<Footer />
1618
</Stack>
1719
</Container>
1820
);

‎yarn.lock

+5
Original file line numberDiff line numberDiff line change
@@ -2140,6 +2140,11 @@ util@^0.12.0:
21402140
safe-buffer "^5.1.2"
21412141
which-typed-array "^1.1.2"
21422142

2143+
vercel-toast@^1.5.3:
2144+
version "1.5.3"
2145+
resolved "https://registry.yarnpkg.com/vercel-toast/-/vercel-toast-1.5.3.tgz#5f8d289a16519da4df5d843c8b8c55c43ba68323"
2146+
integrity sha512-LTaRI4ctCiY7ynY4MmCazF72l9wBTXD4PO0bg1m3ru8ud2sgfFz8CN9NHnwYmR5P+tm2HpPpR0fcUls0o782wg==
2147+
21432148
vm-browserify@1.1.2, vm-browserify@^1.0.1:
21442149
version "1.1.2"
21452150
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"

0 commit comments

Comments
 (0)