Skip to content

Commit 9eb58ac

Browse files
technoph1letechnoph1le
committed
Finished snippets and categories styling
1 parent ce330fb commit 9eb58ac

File tree

9 files changed

+169
-24
lines changed

9 files changed

+169
-24
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import SnippetList from "./layouts/SnippetList";
55

66
const App = () => {
77
return (
8-
<div className="container">
8+
<div className="container flow" data-flow-space="lg">
99
<Header />
1010
<div className="heading">
1111
<h1 className="main-title">
@@ -16,7 +16,7 @@ const App = () => {
1616
search and copy!
1717
</p>
1818
</div>
19-
<main>
19+
<main className="main">
2020
<Sidebar />
2121
<SnippetList />
2222
</main>

‎src/components/Category.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import { CategoryProps } from "../types";
22

33
const Category = ({ title }: CategoryProps) => {
44
return (
5-
<li>
6-
<a href="#">{title}</a>
5+
<li className={`category ${title === "API Requests" ? "active" : null}`}>
6+
<a className="category__link" href="#">
7+
{title}
8+
</a>
79
</li>
810
);
911
};

‎src/components/CategoryList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const CategoryList = () => {
2121
];
2222

2323
return (
24-
<ul role="list">
24+
<ul role="list" className="categories">
2525
{sampleData.map((category) => (
2626
<Category {...category} />
2727
))}

‎src/components/Icons.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,14 @@ export const GitHubIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
9292

9393
export const SwitchIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
9494
<svg
95-
width="24"
96-
height="24"
97-
viewBox="0 0 24 24"
95+
width="22"
96+
height="22"
97+
viewBox="0 0 22 22"
9898
fill="none"
9999
xmlns="http://www.w3.org/2000/svg"
100100
>
101101
<path
102-
d="M3 9.5H21L15 3.5M21.3995 14.5H3.3995L9.3995 20.5"
102+
d="M2.75 8.70833H19.25L13.75 3.20833M19.6162 13.2917H3.11621L8.61621 18.7917"
103103
stroke={fillColor}
104104
strokeWidth="2"
105105
strokeLinecap="round"

‎src/components/LanguageSwitch.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
import slugify from "../utils/slugify";
1+
import { SwitchIcon } from "./Icons";
22

33
const LanguageSwitch = () => {
4-
const sampleData = ["JavaScript", "Python", "Java"];
4+
// const sampleData = ["JavaScript", "Python", "Java"];
55

66
return (
7-
<select id="languages">
8-
{sampleData.map((lan) => (
9-
<option value={slugify(lan)}>{lan}</option>
10-
))}
11-
</select>
7+
<div className="language-switcher">
8+
<h2 className="section-title">JavaScript</h2>
9+
<SwitchIcon />
10+
</div>
1211
);
1312
};
1413

‎src/layouts/Footer.tsx‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,42 @@
1+
import Logo from "../components/Logo";
2+
13
const Footer = () => {
2-
return <p>Footer</p>;
4+
return (
5+
<footer className="footer">
6+
<div className="footer__content flow" data-flow-space="sm">
7+
<Logo />
8+
<p>
9+
<b>QuickSnip</b> is your go-to collection of handy code snippets,
10+
making repetitive tasks easier and faster for developers across
11+
different programming languages.
12+
</p>
13+
<p>
14+
Built by <a href="#">Technophile</a>, and powered by awesome{" "}
15+
<a href="#">community</a>.
16+
</p>
17+
</div>
18+
<nav>
19+
<ul className="flow" data-flow-space="sm">
20+
<li>
21+
<a href="#">Add your own snippet</a>
22+
</li>
23+
<li>
24+
<a href="#">Edit this page on GitHub</a>
25+
</li>
26+
</ul>
27+
</nav>
28+
<nav>
29+
<ul className="flow" data-flow-space="sm">
30+
<li>
31+
<a href="#">See the community</a>
32+
</li>
33+
<li>
34+
<a href="#">Support this project</a>
35+
</li>
36+
</ul>
37+
</nav>
38+
</footer>
39+
);
340
};
441

542
export default Footer;

‎src/layouts/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import LanguageSwitch from "../components/LanguageSwitch";
33

44
const Sidebar = () => {
55
return (
6-
<aside>
6+
<aside className="sidebar flow">
77
<LanguageSwitch />
88
<CategoryList />
99
</aside>

‎src/layouts/SnippetList.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,21 @@ const SnippetList = () => {
99
{
1010
title: "POST Request",
1111
},
12+
{
13+
title: "fetch() Request",
14+
},
15+
{
16+
title: "Async/Await",
17+
},
18+
{
19+
title: "Fetching with Axios",
20+
},
1221
];
1322

1423
return (
15-
<section>
16-
<h2>API Requests</h2>
17-
<ul role="list">
24+
<section className="flow">
25+
<h2 className="section-title">API Requests</h2>
26+
<ul role="list" className="snippets">
1827
{sampleData.map((snippet) => (
1928
<SnippetCard {...snippet} />
2029
))}

‎src/styles/main.css‎

Lines changed: 101 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,19 +135,34 @@ ul:where([role="list"]),
135135
ol:where([role="list"]) {
136136
list-style: none;
137137
padding-left: 0;
138+
margin: 0;
138139
}
139140

140141
/*------------------------------------*\
141142
#UTILS
142143
\*------------------------------------*/
143144
/* Layout */
144145
.container {
145-
max-width: 80rem;
146+
max-width: 90rem;
146147
width: 100%;
147148
padding-inline: clamp(1rem, 4vw, 3rem);
148149
margin-inline: auto;
149150
}
150151

152+
.flow {
153+
--_flow-space: 1em;
154+
display: grid;
155+
gap: var(--_flow-space);
156+
157+
&[data-flow-space="sm"] {
158+
--_flow-space: 0.5em;
159+
}
160+
161+
&[data-flow-space="lg"] {
162+
--_flow-space: 2em;
163+
}
164+
}
165+
151166
/* Text */
152167
.main-title {
153168
font-size: var(--fs-800);
@@ -258,17 +273,78 @@ ol:where([role="list"]) {
258273
.heading {
259274
display: grid;
260275
gap: 0.5em;
261-
padding-block: 2rem;
276+
padding-bottom: 1rem;
262277
text-align: center;
263278
}
264279

280+
.main {
281+
display: grid;
282+
gap: 2rem;
283+
align-items: start;
284+
285+
@media (width > 50em) {
286+
grid-template-columns: 2fr 5fr;
287+
}
288+
}
289+
290+
/*------------------------------------*\
291+
#SIDEBAR
292+
\*------------------------------------*/
293+
.language-switcher {
294+
display: flex;
295+
justify-content: space-between;
296+
cursor: pointer;
297+
}
298+
299+
.language-switcher option {
300+
font-size: var(--fs-400);
301+
}
302+
303+
.categories {
304+
display: grid;
305+
background-color: var(--bg-secondary);
306+
padding: 1.25rem;
307+
padding-bottom: 2rem;
308+
border-radius: var(--br-lg);
309+
}
310+
311+
.category {
312+
border-bottom: 1px solid var(--border-color);
313+
border-radius: var(--br-md);
314+
}
315+
316+
.category.active {
317+
background-image: var(--gradient-secondary);
318+
border: 1px solid var(--border-color);
319+
}
320+
321+
.category__link {
322+
text-decoration: none;
323+
color: inherit;
324+
display: inline-block;
325+
padding: 0.75em 1em;
326+
width: 100%;
327+
328+
&:is(:hover, :focus) {
329+
color: var(--text-primary);
330+
}
331+
}
332+
265333
/*------------------------------------*\
266334
#SNIPPET
267335
\*------------------------------------*/
336+
.snippets {
337+
--_gap: 1.5rem;
338+
display: grid;
339+
gap: var(--_gap);
340+
align-content: start;
341+
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
342+
}
343+
268344
.snippet {
269345
display: grid;
270346
gap: 0.5em;
271-
width: 300px;
347+
width: 100%;
272348
background-color: var(--bg-secondary);
273349
border: 1px solid var(--border-color);
274350
border-radius: var(--br-lg);
@@ -297,3 +373,25 @@ ol:where([role="list"]) {
297373
justify-content: space-between;
298374
align-items: center;
299375
}
376+
377+
/*------------------------------------*\
378+
#FOOTER
379+
\*------------------------------------*/
380+
.footer {
381+
display: flex;
382+
gap: 2rem;
383+
justify-content: space-between;
384+
padding-bottom: 3rem;
385+
}
386+
387+
.footer a {
388+
color: var(--text-secondary);
389+
390+
&:is(:hover, :focus) {
391+
color: var(--text-primary);
392+
}
393+
}
394+
395+
.footer__content {
396+
width: 60ch;
397+
}

0 commit comments

Comments
 (0)