attendant/src/SecretCreationPage3.tsx

import React from "react";

import { ProgressIndicator } from "./stories/ProgressIndicator";

import { Header2 } from "./stories/Header2";

import { Button } from "./stories/Button";
import { IconArrow } from "./stories/IconArrow";
import { InputButtonWithIcon } from "./stories/InputButtonWithIcon";

import { Label } from "./stories/Label";
import { Input } from "./stories/Input";

import { CenteredContainer } from "./stories/utilities/CenteredContainer";
import { SpaceBetweenContainer } from "./stories/utilities/SpaceBetweenContainer";
import { Spacer } from "./stories/utilities/Spacer";
import { TextAlignWrapper } from "./stories/utilities/TextAlignWrapper";

const SecretCreationPage3 = () => {
  return (
    <CenteredContainer fullscreen>
      <CenteredContainer>
        <ProgressIndicator currentProgress={3} />
        <Header2>Share the secret</Header2>
        <SpaceBetweenContainer>
          <Label htmlFor="shareLink">Secret message url</Label>
          <Label htmlFor="shareLink">
            Share this link with the intended recepient
          </Label>
        </SpaceBetweenContainer>
        <InputButtonWithIcon
          id="shareLink"
          onClick={() => {}}
          value="https://intended.link/for/you/MWUzZjg4YmEtZmNmNy00M..."
          variant="copy"
        />
        <Spacer space="2rem" />
        <TextAlignWrapper align="left">
          <Label htmlFor="encodedSecret">
            This is what your message looks like on our server. Pretty secure
            looking eh?:
          </Label>
        </TextAlignWrapper>
        <Input
          variant="disabled-light"
          id="encodedSecret"
          value="\4š€RÏŠ”Çm’ÄyÆFՑ¬Ð$CÑӀÃyۄ"
        />
        <Spacer space="3rem" />
        <SpaceBetweenContainer>
          <Button variant="secondary" onClick={() => {}}>
            <IconArrow arrowDirection="left" />
          </Button>
          <Button onClick={() => {}}>Generate Secret Code</Button>
        </SpaceBetweenContainer>
      </CenteredContainer>
    </CenteredContainer>
  );
};

export default SecretCreationPage3;