import { ReactNode } from "react"; import { Reactile } from "@implex/reactile"; import "./demo.css"; /** * Code for the element (a button in this case) we will put in the top left of the Reactile viewport */ const GoBackButton = () => { return ( ); }; /** * SVG icon for the "elements" application */ export const ElementsSVG = () => { return ( ); }; /** * This component is used to render the placeholder, i.e., the "icon" shown in the widget selection menu of the shortcut widget */ export const ElementsShortcutWidgetPlaceholder = () => { return (

Create a shortcut

); }; /** * SVG icon for the "users" application */ export const UsersSVG = () => { return ( ); }; /** * SVG icon for the "companies" application */ const CompaniesSVG = () => { return ( ); }; /** * SVG icon for the "documents" application */ const DocumentsSVG = () => { return ( ); }; /** * SVG icon for the "filter" application */ const FiltersSVG = () => { return ( ); }; /** * SVG icon for the "schedule" application */ const ScheduleSVG = () => { return ( ); }; /** * SVG icon for the "library" application */ const LibrarySVG = () => { return ( ); }; /** * This is an empty react node component for the showcase applications we did not create content for */ const Empty = (): ReactNode => { return (

This application/widget has currently no content.
In a real world scenario, you would code it yourself and inject your application or widget's content here.

); }; /** * Component for sample search items */ const SearchSample = (): ReactNode => { return (

In a real world scenario, you would inject your own search results here.
Those can be interactable, stylized, updated in real-time etc.

); }; // This key is bound to the sandbox and demo hostnames, do NOT try to use it Reactile.setKey("H33iT92bVz7kVh"); /** * The root component : in this case we are returning the reactile root and we will embed it in the website */ export const DemoRoot = () => { return ( "Application 1"} content={Empty} search={SearchSample} > ""} content={Empty} /> "Application 2"} content={Empty} /> "Application 3"} content={Empty} /> "Application 4"} content={Empty} /> "Application 5"} content={Empty} /> "Application 6"} content={Empty} /> "Application 7"} content={Empty} /> ); };