Skip to content

Commit b1e7c4c

Browse files
technoph1letechnoph1le
committed
Fixed homepage redirect and modal appearance
1 parent 3815948 commit b1e7c4c

File tree

6 files changed

+120
-39
lines changed

6 files changed

+120
-39
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
7+
<title>QuickSnip</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/App.tsx‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,41 @@ import Footer from "./layouts/Footer";
22
import Header from "./layouts/Header";
33
import SnippetList from "./components/SnippetList";
44
import Sidebar from "./layouts/Sidebar";
5+
import { Navigate, useLocation } from "react-router-dom";
6+
import SnippetModal from "./components/SnippetModal";
57

68
const App = () => {
9+
const location = useLocation();
10+
11+
if (location.pathname === "/") {
12+
return <Navigate to="/javascript/dom-manipulation" replace />;
13+
}
14+
715
return (
8-
<div className="container flow" data-flow-space="lg">
9-
<Header />
10-
<div className="heading">
11-
<h1 className="main-title">
12-
Made to save your <span className="text-highlight">time.</span>
13-
</h1>
14-
<p>
15-
Find the necessary snippet in seconds, across multiple languages. Just
16-
search and copy!
17-
</p>
16+
<>
17+
{/* Had to put the modal in App.tsx as well for it to work despite
18+
it's also being created in HTML with portal.
19+
If you know why it's that way, please let me know. */}
20+
<SnippetModal />
21+
<div className="container flow" data-flow-space="xl">
22+
<Header />
23+
<div className="heading">
24+
<h1 className="main-title">
25+
Made to save your <span className="text-highlight">time.</span>
26+
</h1>
27+
<p>
28+
Find the necessary snippet in seconds, across multiple languages.
29+
Just search and copy!
30+
</p>
31+
</div>
32+
<main className="main">
33+
<Sidebar />
34+
<SnippetList />
35+
</main>
36+
<hr className="divider" />
37+
<Footer />
1838
</div>
19-
<main className="main">
20-
<Sidebar />
21-
<SnippetList />
22-
</main>
23-
<hr className="divider" />
24-
<Footer />
25-
</div>
39+
</>
2640
);
2741
};
2842

‎src/components/Button.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { ReactNode } from "react";
1+
import { MouseEventHandler, ReactNode } from "react";
22

33
type ButtonProps = {
44
as?: "button" | "link";
55
href?: string;
66
className?: string;
77
isIcon?: boolean;
8+
onClick?: MouseEventHandler<HTMLButtonElement>;
89
children: ReactNode;
910
};
1011

@@ -14,11 +15,13 @@ const Button = ({
1415
className,
1516
children,
1617
isIcon,
18+
onClick,
1719
...props
1820
}: ButtonProps) => {
1921
return as === "button" ? (
2022
<button
21-
className={`button ${isIcon ?? "button--icon"} ${className}`}
23+
className={`button ${isIcon ? "button--icon" : ""} ${className}`}
24+
onClick={onClick}
2225
{...props}
2326
>
2427
{children}

‎src/components/Icons.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,21 @@ export const ExpandIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
126126
</svg>
127127
);
128128

129+
export const CloseIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
130+
<svg
131+
width="31"
132+
height="30"
133+
viewBox="0 0 31 30"
134+
fill="none"
135+
xmlns="http://www.w3.org/2000/svg"
136+
>
137+
<path
138+
d="M8.5 23.75L6.75 22L13.75 15L6.75 8L8.5 6.25L15.5 13.25L22.5 6.25L24.25 8L17.25 15L24.25 22L22.5 23.75L15.5 16.75L8.5 23.75Z"
139+
fill={fillColor}
140+
/>
141+
</svg>
142+
);
143+
129144
export const CopyIcon = ({
130145
gradient_1 = DEFAULT_GRADIENT_COLORS[0],
131146
gradient_2 = DEFAULT_GRADIENT_COLORS[1],

‎src/components/SnippetModal.tsx‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import ReactDOM from "react-dom";
33
import { useNavigate, useParams } from "react-router-dom";
44
import { LanguageData, SnippetType } from "../types";
55
import { getSnippetByTitleAndCategory } from "../utils/filters";
6+
import { CloseIcon } from "./Icons";
7+
import Button from "./Button";
68

79
const SnippetModal = () => {
8-
console.log("hello modal");
910
const modalRoot = document.getElementById("modal-root");
1011
if (!modalRoot) return null;
1112

1213
const { language, category, snippet_title } = useParams();
1314
const [snippet, setSnippet] = useState<SnippetType | null>(null);
1415
const navigate = useNavigate();
15-
console.log(language, category, snippet_title);
1616

1717
useEffect(() => {
1818
const fetchSnippets = async () => {
@@ -37,15 +37,36 @@ const SnippetModal = () => {
3737
};
3838

3939
fetchSnippets();
40-
}, []);
40+
}, [snippet_title]);
4141

4242
if (!snippet) return null;
4343

4444
return ReactDOM.createPortal(
4545
<div className="modal-overlay">
46-
<div className="modal-content">
47-
{snippet.title}
48-
<button onClick={() => navigate(-1)}>Close</button>
46+
<div className="modal | flow" data-flow-space="lg">
47+
<div className="modal__header">
48+
<h2 className="section-title">{snippet.title}</h2>
49+
<Button isIcon={true} onClick={() => navigate(-1)}>
50+
<CloseIcon />
51+
</Button>
52+
</div>
53+
<div className="code-preview">
54+
<pre>{snippet.code}</pre>
55+
</div>
56+
<p>
57+
<b>Description: </b>
58+
{snippet.description}
59+
</p>
60+
<p>
61+
Contributed by <b>{snippet.author}</b>
62+
</p>
63+
<ul role="list" className="modal__tags">
64+
{snippet.tags.map((tag) => (
65+
<li key={tag} className="modal__tag">
66+
{tag}
67+
</li>
68+
))}
69+
</ul>
4970
</div>
5071
</div>,
5172
modalRoot

‎src/styles/main.css‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
--border-color: var(--clr-neutral-500);
4141

4242
--ff-primary: "Source Sans 3", sans-serif;
43+
--ff-mono: monospace;
4344

4445
--fs-400: 1rem;
4546
--fs-500: 1.125rem;
@@ -143,7 +144,7 @@ ol:where([role="list"]) {
143144
\*------------------------------------*/
144145
/* Layout */
145146
.container {
146-
max-width: 90rem;
147+
max-width: 100rem;
147148
width: 100%;
148149
padding-inline: clamp(1rem, 4vw, 3rem);
149150
margin-inline: auto;
@@ -153,14 +154,18 @@ ol:where([role="list"]) {
153154
--_flow-space: 1em;
154155
display: grid;
155156
gap: var(--_flow-space);
157+
}
156158

157-
&[data-flow-space="sm"] {
158-
--_flow-space: 0.5em;
159-
}
159+
.flow[data-flow-space="sm"] {
160+
--_flow-space: 0.5em;
161+
}
160162

161-
&[data-flow-space="lg"] {
162-
--_flow-space: 2em;
163-
}
163+
.flow[data-flow-space="lg"] {
164+
--_flow-space: 1.5em;
165+
}
166+
167+
.flow[data-flow-space="xl"] {
168+
--_flow-space: 2em;
164169
}
165170

166171
/* Text */
@@ -342,7 +347,6 @@ ol:where([role="list"]) {
342347
--_gap: 1.5rem;
343348
display: grid;
344349
gap: var(--_gap);
345-
align-content: start;
346350
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
347351
}
348352

@@ -400,20 +404,44 @@ ol:where([role="list"]) {
400404
z-index: 1000;
401405
}
402406

403-
.modal-content {
404-
background-color: #2e2e2e;
405-
color: #ffffff;
407+
.modal {
408+
background-color: var(--bg-secondary);
406409
padding: 2rem;
407410
width: 80%;
408411
max-width: 600px;
409-
border-radius: 8px;
412+
border-radius: var(--br-lg);
410413
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
411414
position: relative;
415+
gap: 1rem;
416+
}
417+
418+
.modal__header {
412419
display: flex;
413-
flex-direction: column;
420+
align-items: center;
421+
justify-content: space-between;
414422
gap: 1rem;
415423
}
416424

425+
.code-preview {
426+
background-color: var(--bg-primary);
427+
padding: 0.5em 1em;
428+
border-radius: var(--br-md);
429+
}
430+
431+
.modal__tags {
432+
display: flex;
433+
gap: 1em;
434+
}
435+
436+
.modal__tag {
437+
padding: 0.5em 1em;
438+
border: 1px solid var(--border-color);
439+
border-radius: var(--br-md);
440+
text-transform: lowercase;
441+
font-family: var(--ff-mono);
442+
font-weight: var(--fw-bold);
443+
}
444+
417445
/*------------------------------------*\
418446
#FOOTER
419447
\*------------------------------------*/

0 commit comments

Comments
 (0)