Changes
4 changed files (+146/-25)
-
-
@@ -15,6 +15,9 @@ import { WorkspaceSelectionPage } from "./WorkspaceSelectionPage.tsx";export default { component: WorkspaceSelectionPage, parameters: { layout: "fullscreen", }, } satisfies Meta<typeof WorkspaceSelectionPage>; type Story = StoryObj<typeof WorkspaceSelectionPage>;
-
@@ -31,6 +34,10 @@ },{ id: { value: "ws-bar" }, displayName: "有限会社いいい", }, { id: { value: "ws-baz" }, displayName: "NPO法人 ううう", }, ], },
-
-
-
@@ -11,6 +11,7 @@ import { IllegalMessageError } from "../errors/IllegalMessageError.ts";import { ManagedErrorCallout } from "./ErrorCallout.ts"; import { Layout } from "./WorkspaceSelectionPage/Layout.tsx"; import { WorkspaceList } from "./WorkspaceSelectionPage/WorkspaceList.tsx"; export interface WorkspaceSelectionPageProps {
-
@@ -42,33 +43,22 @@ });if (list.status === "pending") { return ( <Flex align="center" gap="3"> <Spinner /> <Text>ワークスペースを読込中...</Text> </Flex> <Layout title="ワークスペース選択"> <Flex align="center" justify="center" pt="7" gap="2"> <Spinner /> <Text size="2" color="gray"> ワークスペースを読込中... </Text> </Flex> </Layout> ); } if (!list.data) { return ( <ManagedErrorCallout title="一覧の取得に失敗しました" error={list.error} actions={ <Button size="1" loading={list.isFetching} onClick={() => void list.refetch()}> 再取得 </Button> } /> ); } return ( <Flex direction="column" gap="5"> {!!list.error && ( <Layout title="ワークスペース選択"> <ManagedErrorCallout severity="warning" title="最新の一覧の取得に失敗しました" title="一覧の取得に失敗しました" error={list.error} actions={ <Button
-
@@ -76,12 +66,35 @@ size="1"loading={list.isFetching} onClick={() => void list.refetch()} > 再試行 再取得 </Button> } /> )} <WorkspaceList workspaces={list.data.workspaces} /> </Flex> </Layout> ); } return ( <Layout title="ワークスペース選択"> <Flex direction="column" gap="5"> {!!list.error && ( <ManagedErrorCallout severity="warning" title="最新の一覧の取得に失敗しました" error={list.error} actions={ <Button size="1" loading={list.isFetching} onClick={() => void list.refetch()} > 再試行 </Button> } /> )} <WorkspaceList workspaces={list.data.workspaces} /> </Flex> </Layout> ); };
-
-
-
@@ -0,0 +1,47 @@/* * SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> * SPDX-License-Identifier: AGPL-3.0-only */ .bgGrid { --_grid-thickness: 1px; --_grid-color: var(--accent-4); --_grid-bg: var(--accent-2); background-image: linear-gradient( 0deg, var(--_grid-bg), var(--_grid-bg) calc(40% - var(--_grid-thickness) / 2), transparent calc(40% - var(--_grid-thickness) / 2), transparent calc(60% + var(--_grid-thickness)), var(--_grid-bg) calc(60% + var(--_grid-thickness)), var(--_grid-bg) 100% ), linear-gradient( 90deg, var(--_grid-bg), var(--_grid-bg) calc(40% - var(--_grid-thickness) / 2), transparent calc(40% - var(--_grid-thickness) / 2), transparent calc(60% + var(--_grid-thickness)), var(--_grid-bg) calc(60% + var(--_grid-thickness)), var(--_grid-bg) 100% ), linear-gradient( 0deg, transparent calc(50% - var(--_grid-thickness) / 2), var(--_grid-color) calc(50% + var(--_grid-thickness)), transparent calc(50% + var(--_grid-thickness)), transparent 100% ), linear-gradient( 90deg, transparent calc(50% - var(--_grid-thickness) / 2), var(--_grid-color) calc(50% + var(--_grid-thickness)), transparent calc(50% + var(--_grid-thickness)), transparent 100% ); background-size: 2rem 2rem; background-color: var(--_grid-bg); }
-
-
-
@@ -0,0 +1,54 @@// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import { Box, type BoxProps, Card, Flex, Grid, Heading, Inset, ScrollArea, Theme, } from "@radix-ui/themes"; import { type FC, type ReactNode } from "react"; import css from "./Layout.module.css"; export interface LayoutProps extends Pick<BoxProps, "className" | "children" | "style"> { title: ReactNode; } export const Layout: FC<LayoutProps> = ({ className, children, title, ...rest }) => { return ( <Grid className={`${css.bgGrid} ${className || ""}`} inset="0" height="100%" p="4" px={{ initial: "2", md: "4" }} columns={{ initial: "1", md: "minmax(0, 1fr) 30rem" }} {...rest} > <Box asChild gridColumn="-2 / -1"> <Card> <Theme asChild panelBackground="solid"> <Flex height="100%" direction="column" gap="7" p={{ initial: "0", md: "1" }}> <Heading size="4" align="center"> {title} </Heading> <Inset> <ScrollArea> <Box px={{ initial: "2", xs: "3" }} pb="3" pt="0"> {children} </Box> </ScrollArea> </Inset> </Flex> </Theme> </Card> </Box> </Grid> ); };
-