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 { Grid, IslandWrapper, Layout, PageWrapper } from "../../components";
// app islands
import RepositoryHero from "../../islands/RepositoryHero";
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>
        <IslandWrapper data-islandid={`${RepositoryHero.name}$$0`}>
          <RepositoryHero
            themeScheme={commonProps.themeScheme}
            parentOrg={{ slug: commonProps.currentUserUsername! } as any}
            repo={{ slug: "" } as any}
            path={`SSH Keys`}
            showForkButton={false}
            showNewButton
            newButtonText={"New SSH Key"}
            newButtonUrl={buildRouteLink(
              AppRoute.SETTINGS_KEY_ADD,
              { username: commonProps.currentUserUsername! },
              { encodeURIComponent: 0 },
            )}
          />
        </IslandWrapper>
        <Grid.Col fluid nowrap gap={24} style={{ marginTop: 16 }}>
          <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;