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 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)}
        >
          <div>{name}</div>
          <div>{new Date(createdAt).toDateString()}</div>
        </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;