GitFOSS

// 1st-party
import { ReactIsland } from "@ethicdevs/react-monolith";
// 3rd-party
import React, { useState } from "react";
import { UserSSHKey } from "@prisma/client";
// generated via script[generate:prisma]
// import styled, { css } from "styled-components";
// app
import type { WithThemeSchemeProp } from "../types";
import { Card, Grid } from "../components";
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}
      // style={{ marginTop: idx >= 1 ? 16 : 32 }}
    >
      <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" }}
          />
        )}
      </Grid.Col>
    </Card>
  );
};

export default SSHKeyItem;