Skip to content

Commit c5e7612

Browse files
aslilacaslilac
committed
early draft
1 parent 450e6f9 commit c5e7612

File tree

3 files changed

+68
-12
lines changed

3 files changed

+68
-12
lines changed

‎site/src/AppRouter.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ const TemplateInsightsPage = lazy(
193193
);
194194
const HealthPage = lazy(() => import("./pages/HealthPage/HealthPage"));
195195
const GroupsPage = lazy(() => import("./pages/GroupsPage/GroupsPage"));
196+
const IconsPage = lazy(() => import("./pages/IconsPage/IconsPage"));
196197

197198
export const AppRouter: FC = () => {
198199
return (
@@ -207,21 +208,21 @@ export const AppRouter: FC = () => {
207208
<Route element={<DashboardLayout />}>
208209
<Route index element={<Navigate to="/workspaces" replace />} />
209210

210-
<Route path="health" element={<HealthPage />} />
211+
<Route path="/health" element={<HealthPage />} />
211212

212213
<Route
213-
path="external-auth/:provider"
214+
path="/external-auth/:provider"
214215
element={<ExternalAuthPage />}
215216
/>
216217

217-
<Route path="workspaces" element={<WorkspacesPage />} />
218+
<Route path="/workspaces" element={<WorkspacesPage />} />
218219

219-
<Route path="starter-templates">
220+
<Route path="/starter-templates">
220221
<Route index element={<StarterTemplatesPage />} />
221222
<Route path=":exampleId" element={<StarterTemplatePage />} />
222223
</Route>
223224

224-
<Route path="templates">
225+
<Route path="/templates">
225226
<Route index element={<TemplatesPage />} />
226227
<Route path="new" element={<CreateTemplatePage />} />
227228
<Route path=":template">
@@ -261,7 +262,7 @@ export const AppRouter: FC = () => {
261262
</Route>
262263
</Route>
263264

264-
<Route path="users">
265+
<Route path="/users">
265266
<Route element={<UsersLayout />}>
266267
<Route index element={<UsersPage />} />
267268
</Route>
@@ -302,7 +303,7 @@ export const AppRouter: FC = () => {
302303
/>
303304
</Route>
304305

305-
<Route path="settings" element={<SettingsLayout />}>
306+
<Route path="/settings" element={<SettingsLayout />}>
306307
<Route path="account" element={<AccountPage />} />
307308
<Route path="schedule" element={<SchedulePage />} />
308309
<Route path="security" element={<SecurityPage />} />
@@ -340,7 +341,8 @@ export const AppRouter: FC = () => {
340341
path="/:username/:workspace/terminal"
341342
element={<TerminalPage renderer="webgl" />}
342343
/>
343-
<Route path="cli-auth" element={<CliAuthenticationPage />} />
344+
<Route path="/cli-auth" element={<CliAuthenticationPage />} />
345+
<Route path="/icons" element={<IconsPage />} />
344346
</Route>
345347

346348
{/* Using path="*"" means "match anything", so this route

‎site/src/components/CopyableValue/CopyableValue.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
1-
import Tooltip from "@mui/material/Tooltip";
1+
import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
22
import { useClickable } from "hooks/useClickable";
33
import { useClipboard } from "hooks/useClipboard";
4-
import { FC, HTMLProps } from "react";
4+
import { type FC, type HTMLProps } from "react";
55

66
interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
77
value: string;
8+
placement?: TooltipProps["placement"];
9+
PopperProps?: TooltipProps["PopperProps"];
810
}
911

10-
export const CopyableValue: FC<CopyableValueProps> = ({ value, ...props }) => {
12+
export const CopyableValue: FC<CopyableValueProps> = ({
13+
value,
14+
placement = "bottom-start",
15+
PopperProps,
16+
...props
17+
}) => {
1118
const { isCopied, copy } = useClipboard(value);
1219
const clickableProps = useClickable<HTMLSpanElement>(copy);
1320

1421
return (
1522
<Tooltip
1623
title={isCopied ? "Copied!" : "Click to copy"}
17-
placement="bottom-start"
24+
placement={placement}
25+
PopperProps={PopperProps}
1826
>
1927
<span {...props} {...clickableProps} css={{ cursor: "pointer" }} />
2028
</Tooltip>

‎site/src/pages/IconsPage/IconsPage.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { CopyableValue } from "components/CopyableValue/CopyableValue";
2+
import { Margins } from "components/Margins/Margins";
3+
import { Stack } from "components/Stack/Stack";
4+
import { colors } from "theme/colors";
5+
import icons from "theme/icons.json";
6+
7+
export default function () {
8+
return (
9+
<Margins>
10+
<Stack direction="row" wrap="wrap" spacing={1} justifyContent="center">
11+
{icons.map((icon) => (
12+
<CopyableValue value={`/icon/${icon}`} placement="bottom">
13+
<Stack
14+
alignItems="center"
15+
css={(theme) => ({ margin: theme.spacing(1.5) })}
16+
>
17+
<img
18+
src={`/icon/${icon}`}
19+
css={{
20+
width: 64,
21+
height: 64,
22+
objectFit: "contain",
23+
pointerEvents: "none",
24+
backgroundColor: colors.gray[14],
25+
borderRadius: 8,
26+
padding: 8,
27+
}}
28+
/>
29+
<p
30+
css={{
31+
width: 96,
32+
fontSize: 13,
33+
textOverflow: "ellipsis",
34+
textAlign: "center",
35+
overflow: "hidden",
36+
}}
37+
>
38+
{icon}
39+
</p>
40+
</Stack>
41+
</CopyableValue>
42+
))}
43+
</Stack>
44+
</Margins>
45+
);
46+
}

0 commit comments

Comments
 (0)