GitFOSS

// 1st-party
import type { ReactView } from "@ethicdevs/react-monolith";
// 3rd-party
import React from "react";
// generated via script[generate:prisma]
import { UserSSHKey } from "@prisma/client";
// app
import type { CommonProps } from "../../types";
import { buildRouteLink } from "../../utils/shared";
import { AppRoute } from "../../routes.defs";
import { Chip } from "../../components/Chip";
import {
  ButtonAnchor,
  Card,
  Grid,
  IslandWrapper,
  Layout,
  PageWrapper,
} from "../../components";
// app islands
import SSHKeyItem from "../../islands/SSHKeyItem";

export interface SettingsViewProps extends CommonProps {
  sshKeys: UserSSHKey[];
}

const SettingsView: ReactView<SettingsViewProps> = ({
  commonProps,
  sshKeys,
}) => {
  return (
    <Layout {...commonProps}>
      <PageWrapper>
        <Grid.Col fluid nowrap gap={8}>
          <h1 style={{ margin: 0 }}>Settings</h1>
          <Grid.Row fluid gap={16}>
            <Grid.Col flex={0.33} nowrap>
              <Card themeScheme={commonProps.themeScheme}>
                <Grid.Col fluid nowrap gap={8}>
                  <a
                    style={{ width: "100%" }}
                    aria-label={"Manage your profile"}
                    href={buildRouteLink(
                      AppRoute.USER_DETAILS,
                      {
                        username: commonProps.currentUserUsername!,
                      },
                      { encodeURIComponent: false },
                    )}
                  >
                    <Grid.Row fluid nowrap gap={8} alignItems={"center"}>
                      <span style={{ flex: 1 }}>My Profile</span>
                    </Grid.Row>
                  </a>
                  <a
                    style={{ width: "100%" }}
                    aria-label={"Manage your SSH keys"}
                    href={buildRouteLink(
                      AppRoute.SETTINGS_KEYS,
                      {
                        username: commonProps.currentUserUsername!,
                      },
                      { encodeURIComponent: false },
                    )}
                  >
                    <Grid.Row fluid nowrap gap={8} alignItems={"center"}>
                      <span style={{ flex: 1 }}>SSH Keys</span>
                      <Chip color={"white"}>{sshKeys.length}</Chip>
                    </Grid.Row>
                  </a>
                </Grid.Col>
              </Card>
            </Grid.Col>
            <Grid.Col fluid nowrap>
              <Card themeScheme={commonProps.themeScheme}>
                <Grid.Col fluid nowrap gap={8}>
                  <Grid.Row
                    fluid
                    nowrap
                    justifyContent="space-between"
                    gap={8}
                    alignItems="center"
                  >
                    <h2 style={{ margin: 0 }}>Your SSH keys</h2>
                    <ButtonAnchor
                      href={buildRouteLink(
                        AppRoute.SETTINGS_KEY_ADD,
                        { username: commonProps.currentUserUsername! },
                        { encodeURIComponent: 0 },
                      )}
                    >
                      Add
                    </ButtonAnchor>
                  </Grid.Row>
                  {sshKeys.map((key, idx) => (
                    <IslandWrapper
                      data-islandid={`${SSHKeyItem.name}$$${idx}`}
                      key={key.id}
                    >
                      <SSHKeyItem
                        themeScheme={commonProps.themeScheme}
                        sshKey={key}
                      />
                    </IslandWrapper>
                  ))}
                </Grid.Col>
              </Card>
            </Grid.Col>
          </Grid.Row>
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

export default SettingsView;