GitFOSS

// 1st-party
import { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React, { useState } from "react";
import { UserSSHKey } from "@prisma/client";
// app
import type { WithThemeSchemeProp } from "../types";
import { Card } from "../components/Card.styled";
import { Grid } from "../components/Grid";
import { KeyIcon } from "../components/icons/KeyIcon";
import { NamedColors } from "../utils/style";

// import Code from "./Code";

interface SSHKeyItemProps {
  sshKey: UserSSHKey;
}

const SSHKeyItem: ReactIsland<SSHKeyItemProps & WithThemeSchemeProp> = ({
  sshKey: { id, createdAt, name, key },
  themeScheme,
}) => {
  const [show, setShow] = useState<boolean>(false);
  return (
    <Card key={id} themeScheme={themeScheme}>
      <Grid.Col fluid nowrap gap={16}>
        <Grid.Row
          fluid
          gap={8}
          justifyContent="space-between"
          alignItems="center"
          onClick={() => setShow((prev) => !prev)}
        >
          <Grid.Row fluid nowrap gap={8} alignItems={"center"}>
            <KeyIcon color={NamedColors.TEXT_DEFAULT[themeScheme]} size={24} />
            <div>{name}</div>
          </Grid.Row>
          <Grid.Col nowrap gap={4}>
            <div style={{ whiteSpace: "nowrap" }}>Added on:</div>
            <div style={{ whiteSpace: "nowrap" }}>
              {new Date(createdAt).toLocaleDateString()}
            </div>
          </Grid.Col>
        </Grid.Row>
        {show && (
          <code
            // language="plain"
            // code={key}
            // themeScheme={themeScheme}
            style={{ whiteSpace: "break-spaces", wordBreak: "break-all" }}
          >
            {key}
          </code>
        )}
      </Grid.Col>
    </Card>
  );
};

export default SSHKeyItem;