Skip to content
Snippets Groups Projects
nodedetails.tsx 3.73 KiB
Newer Older
  • Learn to ignore specific revisions
  • import React from "react";
    import { ReactNode } from "react";
    import "./nodedetails.css";
    
    export class NodeDetails extends React.Component {
        render(): ReactNode {
            return (
                <div id="tooldetails">
                    <p>
                        <label htmlFor="node-name" hidden>
                            Name
                        </label>
                        <br />
                        <input
                            type="text"
                            id="node-name"
                            name="node-name"
                            placeholder="Enter name"
                            className="bottom-space"
                        ></input>
                    </p>
                    <p>
                        <label htmlFor="node-description">Description</label>
                        <br />
                        <textarea
                            id="node-description"
                            name="node-description"
                            className="bottom-space"
                        ></textarea>
                    </p>
                    <p>
                        <label htmlFor="node-image">Node Image</label>
                        <br />
                        <img
                            id="node-image-preview"
                            className="preview-image"
                            src=""
                        />
                        <br />
                        <input
                            type="text"
                            id="node-image"
                            name="node-image"
                            placeholder="Enter file name or URL"
                            className="bottom-space"
                        />
                    </p>
                    <p>
                        <label htmlFor="node-detail-image">Info Image</label>
                        <br />
                        <img
                            id="node-detail-image-preview"
                            className="preview-image"
                            src=""
                        />
                        <br />
                        <input
                            type="text"
                            id="node-detail-image"
                            name="node-detail-image"
                            placeholder="Enter file name or URL"
                            className="bottom-space"
                        />
                    </p>
                    <p>
                        <label htmlFor="node-type">Type</label>
                        <br />
                        <select
                            id="node-type"
                            name="node-type"
                            className="bottom-space"
                        >
                            <option value="Vorlesung">Vorlesung</option>
                            <option value="Algorithmus">Algorithmus</option>
                            <option value="Definition">Definition</option>
                            <option value="Beispiel">Beispiel</option>
                            <option value="Übung">Übung</option>
                            <option value="Kapitel">Kapitel</option>
                        </select>
                    </p>
                    <p>
                        <label htmlFor="node-video">Video</label>
                        <br />
                        <input
                            type="text"
                            placeholder="Video URL"
                            id="node-video"
                            name="node-video"
                        ></input>
                    </p>
                    <p>
                        <label htmlFor="node-references">References</label>{" "}
                        <small>One URL per line</small>
                        <br />
                        <textarea
                            id="node-references"
                            name="node-references"
                            className="bottom-space"
                        ></textarea>
                    </p>
                </div>
            );
        }
    }