@eviljs/reactx/showcase-v1/showcase.js

Awesome React UI Widgets

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@eviljs/react/box';
import { classes } from '@eviljs/react/classes';
import { Route, useRoute, useRouter } from '@eviljs/react/router';
import { createElement, useEffect, useMemo, useState } from 'react';
export function Showcase(props) {
    const { children, className, ...otherProps } = props;
    const [selected, setSelected] = useState('');
    const [search, setSearch] = useState('');
    const { changeRoute } = useRouter();
    const { routePath, routeParams } = useRoute();
    useEffect(() => {
        const defaultShowcase = children[0];
        const defaultId = defaultShowcase
            ? idOfShowcase(defaultShowcase)
            : '';
        setSelected(routeParams?.id ?? defaultId);
    }, [routeParams?.id]);
    useEffect(() => {
        setSearch(routeParams?.search ?? '');
    }, [routeParams?.search]);
    const items = useMemo(() => {
        const matchingItems = children.filter(it => it[0].toLowerCase().includes(search.toLowerCase()));
        return matchingItems;
    }, [search]);
    const selectedItem = children.find(it => idOfShowcase(it) === selected)
        ?? children[0];
    const selectedComponent = selectedItem?.[1];
    return (_jsxs(Box, { ...otherProps, className: classes('Showcase-d1c8', className), children: [_jsxs("nav", { className: "navigation-70eb std-shadow2", children: [_jsx("input", { className: "input-0caa std-text-body2", value: search, placeholder: "Search something...", onChange: event => changeRoute({
                            params: {
                                ...routeParams,
                                search: event.target.value ?? '',
                            },
                            replace: true,
                        }) }), _jsx("i", { className: "std-space-v4" }), items.map((it, idx) => _jsx(Route, { className: classes('item-988a', {
                            selected: idOfShowcase(it) === selected,
                        }), to: routePath, params: { ...routeParams, id: idOfShowcase(it) }, children: it[0] }, idx))] }), _jsx("div", { className: "workspace-a486", children: selectedComponent && createElement(selectedComponent) })] }));
}
export function defineShowcase(title, component) {
    return [title, component];
}
export function idOfShowcase(item) {
    const [title] = item;
    return title;
}