-
Notifications
You must be signed in to change notification settings - Fork 8
/
ProjectsPage.tsx
105 lines (98 loc) · 2.9 KB
/
ProjectsPage.tsx
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
import React from 'react'
import { Link } from 'react-router-dom'
import { formatDistanceToNowStrict } from 'date-fns'
import { useApiQuery } from '@oxide/api'
import {
buttonStyle,
PageHeader,
PageTitle,
Folder24Icon,
MoreMiscIcon,
} from '@oxide/ui'
import SparklineSVG from '../assets/sparkline.svg'
import { useParams } from '../hooks'
type MetricProps = {
label: string
value: string
className?: string
}
const Metric = ({ label, value, className }: MetricProps) => (
<div className={className}>
<div className="text-gray-200 text-xs font-mono uppercase mb-4">
{label}
</div>
<div className="flex">
<div className="text-display-lg mr-4">{value}</div>
<div>
<SparklineSVG className="stroke-green-500 w-full" />
</div>
</div>
</div>
)
const ProjectsPage = () => {
const { orgName } = useParams('orgName')
const { data } = useApiQuery('organizationProjectsGet', {
organizationName: orgName,
})
if (!data) return <div>loading</div>
return (
<>
<PageHeader className="mb-10">
<PageTitle icon={<Folder24Icon title="Projects" />}>Projects</PageTitle>
<div className="flex items-center">
<Link
to={`/orgs/${orgName}/projects/new`}
className={buttonStyle({ variant: 'ghost' })}
>
New Project
</Link>
<button className="p-3 flex items-center">
<MoreMiscIcon className="mr-4" />
</button>
</div>
</PageHeader>
{data.items.length === 0 && <div>No projects yet</div>}
<div className="space-y-4">
{data.items.map((item) => (
<article
key={item.id}
className="w-full border border-gray-400 rounded"
>
<section className="p-4">
<header className="mb-12">
<Link
to={`/orgs/${orgName}/projects/${item.name}`}
className="text-display-xl"
>
{item.name}
</Link>
</header>
<div className="flex mb-8 space-x-8 lg:space-x-12">
<Metric label="CPU" value="3%" />
<Metric label="Memory" value="13%" />
<Metric
label="Storage"
value="20%"
className="hidden md:block"
/>
<Metric
label="Network"
value="5%"
className="hidden lg:block"
/>
</div>
</section>
<footer className="p-4 border-t border-gray-400 text-xs">
<span className="uppercase">
{formatDistanceToNowStrict(item.timeCreated, {
addSuffix: true,
})}
</span>
</footer>
</article>
))}
</div>
</>
)
}
export default ProjectsPage