How to use piral - 8 common examples

export const User: React.FC = () => {
  const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m => m.user);
  const menuItems = useGlobalState(m => m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m => menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length > 0 && (
    <>
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div open=""></div></li>

export const User: React.FC = () => {
  const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m => m.user);
  const menuItems = useGlobalState(m => m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m => menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length > 0 && (
    <>
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (</li>

const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m => m.user);
  const menuItems = useGlobalState(m => m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m => menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length > 0 && (
    <>
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div open="">
      <div> setOpen(!open)}&gt;
        <img alt="Profile Image" src="{image}">
      </div>
      <ul>
        {currentUser ? (
          &lt;&gt;
            <li>
              <span>Name</span>
              {currentUser.firstName} {currentUser.lastName}
            </li>
            {items}
            <li>
            </li><li></li></ul></div></li>

const LanguagePickerView: React.FC = ({ selected, available }) => {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () => setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

DashboardContainer: ({ children }) => {
    const translate = useTranslate();
    return (
      <div>
        <h1>{translate('sample')}</h1>
        <div>{children}</div>
      </div>
    );
  },
  DashboardTile: ({ children, rows, columns }) =&gt; <div>{children}</div>,

const LanguagePickerView: React.FC = ({ selected, available }) => {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () => setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul>
    </div>
  );

import 'bootstrap/dist/css/bootstrap.min.css';
import { renderInstance, getUserLocale, setupLocalizer } from 'piral';
import { createAuthApi } from 'piral-auth';
import { createSearchApi } from 'piral-search';
import { setupFooter, setupMenu } from './parts';
import { layout, errors } from './layout';

renderInstance({
  settings: {
    locale: setupLocalizer({
      language: getUserLocale,
      messages: {
        de: {},
        en: {},
      },
    }),
    menu: {
      items: [...setupMenu(), ...setupFooter()],
    },
  },
  extendApi: [createAuthApi(), createSearchApi()],
  requestPilets() {
    return fetch('https://feed.piral.io/api/v1/pilet/sample')
      .then(res => res.json())
      .then(res => res.items);
  },

const LanguagePickerView: React.FC = ({ selected, available }) => {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () => setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul></div>