create-table-app 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-table-app",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Create a new Table.js Smart TV app in one command",
|
|
5
5
|
"bin": {
|
|
6
6
|
"create-table-app": "./dist/index.mjs"
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"@types/prompts": "^2.4.9",
|
|
37
37
|
"tsup": "^8.5.1",
|
|
38
38
|
"typescript": "^6.0.2",
|
|
39
|
-
"@table-js/
|
|
40
|
-
"@table-js/
|
|
39
|
+
"@table-js/tsconfig": "0.0.5",
|
|
40
|
+
"@table-js/platform": "0.0.5"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"build": "tsup",
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=1920">
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
6
7
|
<title>{{name}}</title>
|
|
7
8
|
</head>
|
|
8
9
|
<body>
|
|
9
10
|
<div id="root"></div>
|
|
10
11
|
<script type="module" src="src/main.tsx"></script>
|
|
11
12
|
</body>
|
|
12
|
-
</html>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14 13C11.7909 13 10 14.7909 10 17V41C10 43.2091 11.7909 45 14 45H19L17 51H22L25 45H39L42 51H47L45 45H50C52.2091 45 54 43.2091 54 41V17C54 14.7909 52.2091 13 50 13H14Z" fill="#05070A"/>
|
|
3
|
+
<rect x="15" y="18" width="12" height="2" rx="1" fill="#121722"/>
|
|
4
|
+
<rect x="29" y="18" width="12" height="2" rx="1" fill="#121722"/>
|
|
5
|
+
<rect x="43" y="18" width="6" height="2" rx="1" fill="#121722"/>
|
|
6
|
+
<rect x="42.5" y="22.5" width="10" height="10" rx="1.5" fill="#10151E"/>
|
|
7
|
+
<rect x="42.5" y="35.5" width="10" height="6.5" rx="1.5" fill="#10151E"/>
|
|
8
|
+
<rect x="29" y="38" width="12" height="2.5" rx="1.25" fill="#121722"/>
|
|
9
|
+
<path d="M30 28C29.1716 28 28.5 28.6716 28.5 29.5V34.5C28.5 35.3284 29.1716 36 30 36H35V40.8229C35 42.1593 36.6161 42.8286 37.5607 41.8839L45.9445 33.5001C46.5303 32.9143 46.5303 31.9645 45.9445 31.3788L37.5607 22.9949C36.6161 22.0503 35 22.7195 35 24.0559V28H30Z" fill="#0EA5FF"/>
|
|
10
|
+
</svg>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useParams, useRouter } from '@table-js/core'
|
|
2
|
+
import { Button } from '@table-js/ui'
|
|
2
3
|
|
|
3
4
|
interface MovieParams {
|
|
4
5
|
id: string
|
|
@@ -10,19 +11,9 @@ export default function MoviePage() {
|
|
|
10
11
|
|
|
11
12
|
return (
|
|
12
13
|
<div className="min-h-screen bg-(--color-background) text-(--color-text-primary) p-16">
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
className={`
|
|
17
|
-
px-6 py-3 rounded-(--radius-button) bg-(--color-surface) mb-8
|
|
18
|
-
transition-colors duration-150
|
|
19
|
-
${focused ? 'bg-(--color-surface-hover) outline-3 outline-(--color-accent)' : ''}
|
|
20
|
-
`}
|
|
21
|
-
>
|
|
22
|
-
← Back
|
|
23
|
-
</button>
|
|
24
|
-
)}
|
|
25
|
-
</Focusable>
|
|
14
|
+
<Button className="mb-8" variant="secondary" onSelect={back} autoFocus>
|
|
15
|
+
← Back
|
|
16
|
+
</Button>
|
|
26
17
|
<h1 className="text-5xl font-bold">Movie #{id}</h1>
|
|
27
18
|
</div>
|
|
28
19
|
)
|
|
@@ -1,37 +1,70 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useRouter } from '@table-js/core'
|
|
2
|
+
import { Card, Shelf } from '@table-js/ui'
|
|
2
3
|
|
|
3
|
-
const
|
|
4
|
-
{
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
const rows = [
|
|
5
|
+
{
|
|
6
|
+
title: 'Trending',
|
|
7
|
+
items: [
|
|
8
|
+
{ id: '1', title: 'Inception' },
|
|
9
|
+
{ id: '2', title: 'Interstellar' },
|
|
10
|
+
{ id: '3', title: 'The Dark Knight' },
|
|
11
|
+
{ id: '4', title: 'Tenet' },
|
|
12
|
+
{ id: '5', title: 'Dune' },
|
|
13
|
+
{ id: '6', title: 'Arrival' },
|
|
14
|
+
],
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
title: 'Continue Watching',
|
|
18
|
+
items: [
|
|
19
|
+
{ id: '7', title: 'Severance' },
|
|
20
|
+
{ id: '8', title: 'Silo' },
|
|
21
|
+
{ id: '9', title: 'Foundation' },
|
|
22
|
+
{ id: '10', title: 'Dark' },
|
|
23
|
+
{ id: '11', title: 'Andor' },
|
|
24
|
+
{ id: '12', title: 'Shogun' },
|
|
25
|
+
],
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
title: 'Recommended',
|
|
29
|
+
items: [
|
|
30
|
+
{ id: '13', title: 'The Matrix' },
|
|
31
|
+
{ id: '14', title: 'Blade Runner 2049' },
|
|
32
|
+
{ id: '15', title: 'The Creator' },
|
|
33
|
+
{ id: '16', title: 'Mad Max: Fury Road' },
|
|
34
|
+
{ id: '17', title: 'Edge of Tomorrow' },
|
|
35
|
+
{ id: '18', title: 'Ex Machina' },
|
|
36
|
+
],
|
|
37
|
+
},
|
|
7
38
|
]
|
|
8
39
|
|
|
9
40
|
export default function HomePage() {
|
|
10
41
|
const { navigate } = useRouter()
|
|
11
42
|
|
|
12
43
|
return (
|
|
13
|
-
<div className="min-h-screen bg-(--color-background) text-(--color-text-primary)
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
44
|
+
<div className="min-h-screen bg-(--color-background) py-16 text-(--color-text-primary)">
|
|
45
|
+
<header className="mb-12 px-16">
|
|
46
|
+
<h1 className="mb-3 text-4xl font-bold">My TV App</h1>
|
|
47
|
+
<p className="max-w-3xl text-lg text-(--color-text-secondary)">
|
|
48
|
+
Auto-routed pages, TV focus navigation, and shelves that follow the active item.
|
|
49
|
+
</p>
|
|
50
|
+
</header>
|
|
51
|
+
|
|
52
|
+
<div className="space-y-10 pb-16">
|
|
53
|
+
{rows.map((row, rowIndex) => (
|
|
54
|
+
<Shelf key={row.title} title={row.title}>
|
|
55
|
+
{row.items.map((item, itemIndex) => (
|
|
56
|
+
<Card
|
|
57
|
+
key={item.id}
|
|
58
|
+
title={item.title}
|
|
59
|
+
subtitle="Open details"
|
|
60
|
+
className="h-72 w-48 shrink-0"
|
|
61
|
+
autoFocus={rowIndex === 0 && itemIndex === 0}
|
|
62
|
+
onSelect={() => navigate(`/movie/${item.id}`)}
|
|
63
|
+
/>
|
|
64
|
+
))}
|
|
65
|
+
</Shelf>
|
|
33
66
|
))}
|
|
34
|
-
</
|
|
67
|
+
</div>
|
|
35
68
|
</div>
|
|
36
69
|
)
|
|
37
70
|
}
|
|
@@ -26,10 +26,6 @@ body {
|
|
|
26
26
|
background-color: var(--color-background);
|
|
27
27
|
color: var(--color-text-primary);
|
|
28
28
|
font-family: var(--font-sans);
|
|
29
|
-
overflow: hidden;
|
|
29
|
+
overflow-x: hidden;
|
|
30
|
+
overflow-y: auto;
|
|
30
31
|
}
|
|
31
|
-
|
|
32
|
-
[data-focused="true"] {
|
|
33
|
-
outline: 3px solid var(--color-accent);
|
|
34
|
-
outline-offset: 3px;
|
|
35
|
-
}
|