Widget showcase

import {
    ActionButton, Button, LinkButton,
    Admonition, Collapsible,
    FormCheckbox, FormDropdownList, FormFileUploadButton, FormGroup, FormRadioGroup, FormTextArea,
    FormTextBox, FormToggle, Slider, RawHtml, LoadingSpinner, Icon,
    Dropdown, FormListItem, FormDropdownDivider, FormDropdownSubmenu,
    NoteAutocomplete, NoteLink, Modal,
    CKEditor,
    useEffect, useState
} from "trilium:preact";
import { showMessage } from "trilium:api";

export default function() {
    const [ time, setTime ] = useState();
    const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam accumsan eu odio non gravida. Pellentesque ornare, arcu condimentum molestie dignissim, nibh turpis ultrices elit, eget elementum nunc erat at erat. Maecenas vehicula consectetur elit, nec fermentum elit venenatis eu.";
    useEffect(() => {
        const interval = setInterval(() => setTime(new Date().toLocaleString()), 1000);
        return () => clearInterval(interval);
    }, []);
    
    return (
        

            
Widget showcase#

            
            
                Admonition

                {lorem}
            
            
            
                {lorem}
            

            
            
            
            
        
        
    );
}

function Buttons() {
    const onClick = () => showMessage("A button was pressed");
    
    return (
        <>
            
Buttons#
            

                
                
                                
            
        
    )
}

function FormElements() {
    const [ checkboxChecked, setCheckboxChecked ] = useState(false);
    const [ dropdownValue, setDropdownValue ] = useState("key-1");
    const [ radioGroupValue, setRadioGroupValue ] = useState("key-1");
    const [ sliderValue, setSliderValue ] = useState(50);
    
    return (
        <>
            
Form elements#
            

                
                    
                
                
                    
                
                
                    
                
                
                    
                                
                
                     {}}
                    />                
                        
                
                     {}}
                    />
                
                
                    
                
                
                     {
                            const file = files?.[0];
                            if (!file) return;
                            showMessage(`Got file "${file.name}" of size ${file.size} B and type ${file.type}.`);
                        }}
                    /> 
                                
                
                    
                
                
                    
                
                
                    
                
            
        
    )
}

function NoteElements() {
    const [ noteId, setNoteId ] = useState("");
    
    return (
        

            
Note elements#

            
                
            

            
                {noteId
                ? 
                : Select a note first}
            
        
    );
}

function ModalSample() {
    const [ shown, setShown ] = useState(false);    
    
    return (
        <>
            
Modal#
             setShown(true)} />            
             setShown(false)}>
                Modal goes here.
            
        
    )
}

function DropdownSample() {
    return (
        <>
            
Dropdown menu#
            
                Cut
                Copy
                Paste
                
                
                    More items
                
            
        
    )
}