Skip to content

Commit 826b744

Browse files
author
Frank
committed
wip: zen
1 parent aad33ce commit 826b744

20 files changed

Lines changed: 1093 additions & 8 deletions

‎packages/console/app/src/routes/workspace/[id].tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import "./[id].css"
2-
import { MonthlyLimitSection } from "~/component/workspace/monthly-limit-section"
3-
import { NewUserSection } from "~/component/workspace/new-user-section"
4-
import { BillingSection } from "~/component/workspace/billing-section"
5-
import { PaymentSection } from "~/component/workspace/payment-section"
6-
import { UsageSection } from "~/component/workspace/usage-section"
7-
import { KeySection } from "~/component/workspace/key-section"
2+
import { MonthlyLimitSection } from "./monthly-limit-section"
3+
import { NewUserSection } from "./new-user-section"
4+
import { BillingSection } from "./billing-section"
5+
import { PaymentSection } from "./payment-section"
6+
import { UsageSection } from "./usage-section"
7+
import { KeySection } from "./key-section"
8+
import { MemberSection } from "./member-section"
9+
import { Show } from "solid-js"
10+
import { useParams } from "@solidjs/router"
811

912
export default function () {
13+
const params = useParams()
1014
return (
1115
<div data-page="workspace-[id]">
1216
<section data-component="title-section">
@@ -23,6 +27,9 @@ export default function () {
2327
<div data-slot="sections">
2428
<NewUserSection />
2529
<KeySection />
30+
<Show when={isBeta(params.id)}>
31+
<MemberSection />
32+
</Show>
2633
<BillingSection />
2734
<MonthlyLimitSection />
2835
<UsageSection />
@@ -36,6 +43,6 @@ export function isBeta(workspaceID: string) {
3643
return [
3744
"wrk_01K46JDFR0E75SG2Q8K172KF3Y", // production
3845
"wrk_01K4NFRR5P7FSYWH88307B4DDS", // dev
39-
"wrk_01K4PJRKJ2WPQZN3FFYRV4673F", // frank
46+
"wrk_01K68M8J1KK0PJ39H59B1EGHP6", // frank
4047
].includes(workspaceID)
4148
}

packages/console/app/src/component/workspace/billing-section.module.css renamed to packages/console/app/src/routes/workspace/billing-section.module.css

File renamed without changes.

packages/console/app/src/component/workspace/billing-section.tsx renamed to packages/console/app/src/routes/workspace/billing-section.tsx

File renamed without changes.

packages/console/app/src/component/workspace/common.tsx renamed to packages/console/app/src/routes/workspace/common.tsx

File renamed without changes.

packages/console/app/src/component/workspace/key-section.module.css renamed to packages/console/app/src/routes/workspace/key-section.module.css

File renamed without changes.

packages/console/app/src/component/workspace/key-section.tsx renamed to packages/console/app/src/routes/workspace/key-section.tsx

File renamed without changes.

‎packages/console/app/src/routes/workspace/member-section.module.css‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
.root {
2+
[data-component="empty-state"] {
3+
padding: var(--space-20) var(--space-6);
4+
text-align: center;
5+
border: 1px dashed var(--color-border);
6+
border-radius: var(--border-radius-sm);
7+
display: flex;
8+
flex-direction: column;
9+
gap: var(--space-2);
10+
11+
p {
12+
line-height: 1.5;
13+
font-size: var(--font-size-sm);
14+
color: var(--color-text-muted);
15+
}
16+
}
17+
18+
[data-slot="create-form"] {
19+
display: flex;
20+
flex-direction: column;
21+
gap: var(--space-3);
22+
padding: var(--space-4);
23+
border: 1px solid var(--color-border);
24+
border-radius: var(--border-radius-sm);
25+
26+
[data-slot="input-container"] {
27+
display: flex;
28+
flex-direction: column;
29+
gap: var(--space-1);
30+
}
31+
32+
@media (max-width: 30rem) {
33+
gap: var(--space-2);
34+
}
35+
36+
input {
37+
flex: 1;
38+
padding: var(--space-2) var(--space-3);
39+
border: 1px solid var(--color-border);
40+
border-radius: var(--border-radius-sm);
41+
background-color: var(--color-bg);
42+
color: var(--color-text);
43+
font-size: var(--font-size-sm);
44+
font-family: var(--font-mono);
45+
46+
&:focus {
47+
outline: none;
48+
border-color: var(--color-accent);
49+
}
50+
51+
&::placeholder {
52+
color: var(--color-text-disabled);
53+
}
54+
}
55+
56+
[data-slot="form-actions"] {
57+
display: flex;
58+
gap: var(--space-2);
59+
}
60+
61+
[data-slot="form-error"] {
62+
color: var(--color-danger);
63+
font-size: var(--font-size-sm);
64+
margin-top: var(--space-1);
65+
line-height: 1.4;
66+
}
67+
}
68+
69+
[data-slot="members-table"] {
70+
overflow-x: auto;
71+
}
72+
73+
[data-slot="members-table-element"] {
74+
width: 100%;
75+
border-collapse: collapse;
76+
font-size: var(--font-size-sm);
77+
78+
thead {
79+
border-bottom: 1px solid var(--color-border);
80+
}
81+
82+
th {
83+
padding: var(--space-3) var(--space-4);
84+
text-align: left;
85+
font-weight: normal;
86+
color: var(--color-text-muted);
87+
text-transform: uppercase;
88+
}
89+
90+
td {
91+
padding: var(--space-3) var(--space-4);
92+
border-bottom: 1px solid var(--color-border-muted);
93+
color: var(--color-text-muted);
94+
font-family: var(--font-mono);
95+
96+
&[data-slot="member-email"] {
97+
color: var(--color-text);
98+
font-family: var(--font-sans);
99+
font-weight: 500;
100+
}
101+
102+
&[data-slot="member-role"] {
103+
font-family: var(--font-mono);
104+
105+
button {
106+
display: flex;
107+
align-items: center;
108+
gap: var(--space-2);
109+
padding: var(--space-2) var(--space-3);
110+
font-size: var(--font-size-sm);
111+
font-weight: 400;
112+
border: none;
113+
background-color: transparent;
114+
color: var(--color-text-muted);
115+
font-family: var(--font-mono);
116+
border-radius: var(--border-radius-sm);
117+
cursor: pointer;
118+
transition: all 0.15s ease;
119+
text-transform: none;
120+
121+
&:hover:not(:disabled) {
122+
background-color: var(--color-bg-surface);
123+
color: var(--color-text);
124+
}
125+
126+
&:disabled {
127+
cursor: default;
128+
color: var(--color-text);
129+
}
130+
131+
span {
132+
font-family: inherit;
133+
}
134+
}
135+
}
136+
137+
&[data-slot="member-date"] {
138+
color: var(--color-text);
139+
}
140+
141+
&[data-slot="member-actions"] {
142+
font-family: var(--font-sans);
143+
}
144+
}
145+
146+
tbody tr {
147+
&:last-child td {
148+
border-bottom: none;
149+
}
150+
}
151+
152+
@media (max-width: 40rem) {
153+
154+
th,
155+
td {
156+
padding: var(--space-2) var(--space-3);
157+
font-size: var(--font-size-xs);
158+
}
159+
160+
th {
161+
&:nth-child(3)
162+
163+
/* Date */
164+
{
165+
display: none;
166+
}
167+
}
168+
169+
td {
170+
&:nth-child(3)
171+
172+
/* Date */
173+
{
174+
display: none;
175+
}
176+
}
177+
}
178+
}
179+
}

0 commit comments

Comments
 (0)