Forked from nbbaier/react_client
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// JSX can be used in the client val thanks to this magic comment
/** @jsxImportSource https://esm.sh/react **/
// Make sure to only import from esm.sh (npm: specifier are not supported in the browser)
import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";
import { Button } from "https://esm.town/v/nbbaier/shadcnButton";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "https://esm.town/v/nbbaier/shadcnTable";
const data = [["INV001", "Paid", "Credit Card", "$250.00"], ["INV001", "Paid", "Credit Card", "$250.00"], [
"INV001",
"Paid",
"Credit Card",
"$250.00",
]];
export function App() {
return (
<>
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{data.map(payment => {
return (
<TableRow>
<TableCell className="font-medium">{payment[0]}</TableCell>
<TableCell>{payment[1]}</TableCell>
<TableCell>{payment[2]}</TableCell>
<TableCell className="text-right">{payment[3]}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</>
);
}
// The app will be rendered inside the root div
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.