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 {
  ButtonAnchor,
  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}
      showDrawerSettings
      username={commonProps.currentUserUsername!}
    >
      <PageWrapper>
        <Grid.Col fluid nowrap gap={24}>
          <Grid.Row
            fluid
            nowrap
            justifyContent="space-between"
            gap={8}
            alignItems="center"
          >
            <h1 style={{ margin: 0 }}>SSH Keys</h1>
            <ButtonAnchor
              href={buildRouteLink(
                AppRoute.SETTINGS_KEY_ADD,
                { username: commonProps.currentUserUsername! },
                { encodeURIComponent: 0 },
              )}
            >
              Add
            </ButtonAnchor>
          </Grid.Row>
          <Grid.Col fluid nowrap gap={12}>
            {sshKeys.map((key, idx) => (
              <IslandWrapper
                key={key.id}
                data-islandid={`${SSHKeyItem.name}$$${idx}`}
              >
                <SSHKeyItem
                  themeScheme={commonProps.themeScheme}
                  sshKey={key}
                />
              </IslandWrapper>
            ))}
          </Grid.Col>
        </Grid.Col>
      </PageWrapper>
    </Layout>
  );
};

export default SettingsView;