Skip to content
This repository was archived by the owner on Jul 6, 2025. It is now read-only.

Commit b50bcd5

Browse files
ijeije
committed
Updat react-app example
1 parent dc1e2bb commit b50bcd5

File tree

4 files changed

+40
-34
lines changed

4 files changed

+40
-34
lines changed

‎examples/react-app/assets/external-link.svg

Lines changed: 6 additions & 0 deletions
Loading

‎examples/react-app/routes/index.tsx

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
11
import { Head, Link } from "aleph/react";
22

3-
const linkIcon = (
4-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
5-
<path
6-
d="M14 5C13.4477 5 13 4.55228 13 4C13 3.44772 13.4477 3 14 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4L21 10C21 10.5523 20.5523 11 20 11C19.4477 11 19 10.5523 19 10L19 6.41422L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L17.5858 5H14ZM3 7C3 5.89543 3.89543 5 5 5H10C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7H5V19H17V14C17 13.4477 17.4477 13 18 13C18.5523 13 19 13.4477 19 14V19C19 20.1046 18.1046 21 17 21H5C3.89543 21 3 20.1046 3 19V7Z"
7-
fill="currentColor"
8-
/>
9-
</svg>
10-
);
11-
123
export default function Index() {
134
return (
145
<div className="page y-center">
@@ -25,18 +16,15 @@ export default function Index() {
2516
<strong>Aleph.js</strong> gives you the best developer experience for building web applications<br />{" "}
2617
with modern toolings.
2718
</p>
28-
<div className="links">
19+
<div className="external-links">
2920
<a href="https://alephjs.org/docs/get-started" target="_blank">
3021
Get Started
31-
{linkIcon}
3222
</a>
3323
<a href="https://alephjs.org/docs" target="_blank">
3424
Docs
35-
{linkIcon}
3625
</a>
3726
<a href="https://github.com/alephjs/aleph.js" target="_blank">
3827
Github
39-
{linkIcon}
4028
</a>
4129
</div>
4230
<nav>

‎examples/react-app/routes/todos.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,51 +6,58 @@ type TodoItem = {
66
completed: boolean;
77
};
88

9-
let todos: TodoItem[] = JSON.parse(window.localStorage?.getItem("todos") || "[]");
9+
type DataProps = {
10+
todos: TodoItem[];
11+
};
12+
13+
const storage: DataProps = {
14+
todos: JSON.parse(window.localStorage?.getItem("todos") || "[]"),
15+
};
1016

11-
export const data: Data = {
17+
export const data: Data<DataProps> = {
1218
get: (_req, ctx) => {
13-
return ctx.json({ todos });
19+
return ctx.json(storage);
1420
},
1521
put: async (req, ctx) => {
1622
const { message } = await req.json();
1723
if (typeof message === "string") {
18-
todos.push({ id: Date.now(), message, completed: false });
19-
window.localStorage?.setItem("todos", JSON.stringify(todos));
24+
storage.todos.push({ id: Date.now(), message, completed: false });
25+
window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
2026
}
21-
return ctx.json({ todos });
27+
return ctx.json(storage);
2228
},
2329
patch: async (req, ctx) => {
2430
const { id, message, completed } = await req.json();
25-
const todo = todos.find((todo) => todo.id === id);
31+
const todo = storage.todos.find((todo) => todo.id === id);
2632
if (todo) {
2733
if (typeof message === "string") {
2834
todo.message = message;
2935
}
3036
if (typeof completed === "boolean") {
3137
todo.completed = completed;
3238
}
33-
window.localStorage?.setItem("todos", JSON.stringify(todos));
39+
window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
3440
}
35-
return ctx.json({ todos });
41+
return ctx.json(storage);
3642
},
3743
delete: async (req, ctx) => {
3844
const { id } = await req.json();
3945
if (id) {
40-
todos = todos.filter((todo) => todo.id !== id);
41-
window.localStorage?.setItem("todos", JSON.stringify(todos));
46+
storage.todos = storage.todos.filter((todo) => todo.id !== id);
47+
window.localStorage?.setItem("todos", JSON.stringify(storage.todos));
4248
}
43-
return ctx.json({ todos });
49+
return ctx.json(storage);
4450
},
4551
};
4652

4753
export default function Todos() {
48-
const { data, isMutating, mutation } = useData<{ todos: TodoItem[] }>();
54+
const { data, isMutating, mutation } = useData<DataProps>();
4955

5056
return (
5157
<div className="page todos-app">
5258
<Head>
53-
<title>Todos App by Aleph.js</title>
59+
<title>Todos</title>
60+
<meta name="description" content="A todos app powered by Aleph.js" />
5461
</Head>
5562
<h1>
5663
<span>Todos</span>

‎examples/react-app/style/app.css

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,34 @@
3131
font-weight: 600;
3232
}
3333

34-
.links {
34+
.external-links {
3535
display: flex;
3636
align-items: center;
3737
justify-content: center;
3838
gap: 15px;
3939
margin-top: 12px;
4040
}
4141

42-
.links a {
42+
.external-links a {
4343
display: flex;
4444
align-items: center;
45-
gap: 4px;
45+
gap: 5px;
4646
color: #666;
4747
text-decoration: none;
4848
transition: color 0.15s ease-in;
4949
}
5050

51-
.links a svg {
52-
color: #aaa;
51+
.external-links a:hover {
52+
color: #000;
5353
}
5454

55-
.links a:hover {
56-
color: #000;
55+
.external-links a:after {
56+
display: block;
57+
width: 16px;
58+
height: 16px;
59+
background: url(../assets/external-link.svg) no-repeat center;
60+
background-size: contain;
61+
content: "";
5762
}
5863

5964
nav a {

0 commit comments

Comments
 (0)