UNPKG

irisrad-ui

Version:

UI elements developered for IRIS R&D Group Inc

116 lines (108 loc) 2.76 kB
import React, { useState } from "react"; import logo from "../../assets/images/iris_logo.png"; import { IrisButton } from "../irisButton/IrisButton"; import { IrisIconButton } from "../irisIconButtons"; import IrisMenuToggle from "../irisIconButtons/IrisMenuToggle"; import { IrisMenu, IrisMenuItem } from "../irisMenu/IrisMenu"; import { IrisHeader } from "./IrisHeader"; // ui element // export for StoryBook as a tab export default { title: "Example/IrisHeader", // could be represent on the url, example could be a root of the node component: IrisHeader, parameters: { layout: "none", // centered | fullscreen | padded | none, }, }; const links = [ { label: "home", node: ( <a href="#" className="link"> home </a> ), }, { label: "About", node: ( <a href="#" className="link"> About </a> ), }, { label: "Services", node: ( <a href="#" className="link"> Services </a> ), }, { label: "Contact", node: ( <a href="#" className="link"> Contact </a> ), }, { label: "Feedback", node: ( <a href="#" className="link"> Feedback </a> ), }, ]; const logoComponent = ( <a href="https://www.irisradgroup.com/" target="_blank"> <img src={logo} alt="iris-logo" className="logo-img" height={50} /> </a> ); const hiddenLinks = [ { label: "Profile", onClick: () => alert("profile") }, { label: "My Account", onClick: () => alert("My Account") }, { label: "Logout", onClick: () => alert("Logout") }, ]; export const Primary = () => ( <IrisHeader links={links} hiddenLinks={hiddenLinks} logoComponent={logoComponent} ></IrisHeader> ); export const Secondary = () => ( <IrisHeader logoComponent={logoComponent} headerTitle="Incident Portal" actionButtons={[ <IrisButton active={window.location.pathname === "/"} iconProps={{ iconTitle: "assessment", }} onClick={() => history.push("/")} // color="secondary" > Report </IrisButton>, <IrisButton active={window.location.pathname === "/report"} iconProps={{ iconTitle: "summarize", }} color="secondary" onClick={() => history.push("/report")} > Summary </IrisButton>, ]} hiddenLinks={[ { label: "Report", onClick: () => alert("Signing out") }, { label: "Summary", onClick: () => alert("Signing out") }, { label: "Logout", onClick: () => alert("Signing out") }, ]} userName="Lucien" /> );