gistfile1.txt

import React, { useState } from "react";
import MarkdownEditor from "../MarkdownEditor";
import CodeEditor from "../CodeEditor";
import TipCard from "../Card/TipCard";
import InputCard from "../Card/InputCard";
import HashTagIcon from "../SVG/HashTagIcon";
import style from "./style";
import TagInput from "../Input/TagInput";
import { colors } from "../../styles";
import BugariumIcon from "../SVG/BugariumIcon";
import ModalSet from "../ModalSet";
import Bugarium from "../Bugarium";
import { useArrayState } from "../../hooks";

const MakeBugariumPage = () => {
	const [title, updateTitle] = useState("");
	const [description, updateDescription] = useState("");
	const [codeBlock, updateCodeBlock] = useState("");
	const [tagList, updateTagList] = useArrayState([]);

	return (
		<div>
			<header {...style.header}>
        <div style={{ fontSize: "3em", height: "1em" }}>
          <BugariumIcon />
        </div>
        <h2>Found some bugs? Let put them into the BUGARIUM!</h2>
      </header>
			<InputCard>
				<div {...style.captionInputCard}>
					<div>
						<HashTagIcon />
					</div>
					<input
						onInput={el => updateTitle(el.target.value)}
						type="text"
						placeholder="To start making a new Bugarium, please give it a caption"
					/>
				</div>
			</InputCard>
			<InputCard label="Now describe about your bug/error">
				<TipCard>
          A good Bugarium will include the following parts:
          <ul>
            <li>Tell other users what you are doing.</li>
            <li>The detailed information about the bug/error.</li>
            <li>The error logs which is returned by the console.</li>
            <li>Share with other users what have you tried so far. What is the approach you are thinking of using?</li>
            <li>What result do you expect?</li>
            <li>
              The code block about the bug/error should <strong>not</strong> be put in here.
            </li>
          </ul>
        </TipCard>
				<MarkdownEditor onInput={updateDescription} height="300px" />
			</InputCard>
			<InputCard label="Finally, give your Bugarium the bug/error code block">
				<CodeEditor onInput={updateCodeBlock} height="300px" />
			</InputCard>
			<InputCard label="Tags will help other users categorize your Bugarium">
				<TipCard>
          Tags are very useful in categorizing the Bugarium, correctly using it will help your Bugarium become more
          attractive.
          <ul>
            <li>Include the tag that specifies the language will make your code be highlighted in that language.</li>
            <li>
              Insert up to <strong>five</strong> tags!
            </li>
            <li>Only include the tags related with the Bugarium.</li>
          </ul>
        </TipCard>
				<TagInput onListChange={updateTagList} />
			</InputCard>
			<div {...style.stickyButtonGroup}>
				<button {...style.button({})}>Save Draft</button>
				<ModalSet
					buttonLabel="Preview"
					title="Preview Bugarium"
					buttonStyle={style.button({ color: colors.helper, hoverColor: colors.brightHelper })}
				>
					<Bugarium previewMode={{ title, description, codeBlock, tagList }} />
				</ModalSet>
				<button {...style.button({ color: colors.success, hoverColor: colors.brightSuccess })}>Post</button>
				<button {...style.button({ color: colors.danger, hoverColor: colors.brightDanger })}>Reset</button>
			</div>
		</div>
	);
};

MakeBugariumPage.whyDidYouRender = true;

export default MakeBugariumPage;