{{#if (eq appType "basic")}}

<div id="app">

<header>

<h1>

<img src="/favicon.svg" />

TinyBase / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}

</h1>

</header>

<p>

This is more or less the simplest TinyBase app you could imagine. It

contains a handful of key-values and tables which are mutated with the

buttons below. There's no fancy rendering - just the raw JSON of the

underlying store. See the full set of

<a href="https://tinybase.org/demos/">TinyBase demos</a> for more

interesting examples!

</p>

<div id="buttons">

<button id="countButton">Increment number</button>

<button id="randomButton">Random number</button>

<button id="addPetButton">Add a pet</button>

</div>

<details open>

<summary>Values</summary>

<pre id="valuesJson"></pre>

</details>

<details open>

<summary>Tables</summary>

<pre id="tablesJson"></pre>

</details>

{{/if}}

{{#if (eq appType "chat")}}

<div id="app">

<header>

<h1>

<img src="/favicon.svg" />

TinyBase Chat / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}

</h1>

</header>

<div class="username-input">

<label>Username:</label>

<input type="text" id="username-input" placeholder="Enter your name" />

</div>

<div id="messages"></div>

<div class="message-input">

<input type="text" id="message-input" placeholder="Type a message..." />

<button id="send-button">Send</button>

</div>

</div>

{{/if}}

{{#if (eq appType "drawing")}}

<div id="app">

<header>

<h1>

<img src="/favicon.svg" />

TinyBase Drawing / {{#if typescript}}TypeScript{{else}}JavaScript{{/if}}

</h1>

</header>

<div class="drawing-controls">

<div class="color-picker" id="color-picker"></div>

<div class="brush-size">

<label>Brush Size:</label>

<input type="range" id="brush-size" min="1" max="50" value="5" />

<span id="brush-size-value">5</span>

</div>

<button id="clear-button" class="clear-btn">Clear Canvas</button>

</div>

<canvas id="drawing-canvas" class="drawing-canvas"></canvas>

</div>

{{/if}}

#buttons {

border: solid #666;

border-width: 1px 0;

text-align: center;

}

#buttons button {

border: 1px solid #666;

border-radius: 0.25rem;

padding: 0.5rem 1rem;

background: #222;

color: #fff;

font-family: inherit;

font-weight: 800;

font-size: 0.8rem;

width: 10rem;

margin: 1rem;

}

#buttons button:hover {

border-color: #d81b60;

}

table {

border-collapse: collapse;

font-size: inherit;

line-height: inherit;

margin-top: 0.5rem;

table-layout: fixed;

width: 100%;

margin-bottom: 2rem;

caption-side: bottom;

}

table caption {

text-align: left;

button {

border: 0;

margin-right: 0.25rem;

}

}

table caption button {

line-height: 0.7rem;

margin: 0 0.25rem 0 0;

vertical-align: middle;

}

th,

td {

padding: 0.25rem 0.5rem 0.25rem 0;

text-align: left;

}

thead th,

thead td {

border: solid #999;

border-width: 1px 0;

}

tbody th,

tbody td {

border-bottom: 1px solid #333;

}

table.sortedTable thead th {

cursor: pointer;

}

@media (min-width: 40rem) {

#app {

grid-template-columns: 1fr 1fr;

}

header,

p,

#buttons {

grid-column: span 2;

}

}

import {StrictMode, useState} from 'react';

import {createStore} from 'tinybase';

import {Provider, useCreateStore, useAddRowCallback, useRow, useSetValueCallback, useValue} from 'tinybase/ui-react';

import {SortedTableInHtmlTable, useCell} from 'tinybase/ui-react-dom';

import {Inspector} from 'tinybase/ui-react-inspector';

const MessageInput = () => {

const [message, setMessage] = useState('');

const username = useValue('username') || 'Anonymous';

const handleSend = useAddRowCallback(

'messages',

() => ({

username,

text: message,

timestamp: Date.now(),

}),

[message, username],

);

const onSubmit = (e: React.FormEvent) => {

e.preventDefault();

if (message.trim()) {

handleSend();

setMessage('');

}

};

return (

<form onSubmit={onSubmit} className="message-input">

<input type="text" value={message} onChange={(e)=> setMessage(e.target.value)}

placeholder="Type a message..."

autoFocus

/>

<button type="submit">Send</button>

</form>

);

};

const Message = ({rowId}: {rowId: string}) => {

const row = useRow('messages', rowId);

const time = new Date((row as any).timestamp).toLocaleTimeString();

return (

<div className="message">

<span className="username">{(row as any).username}:</span>

<span className="text">{(row as any).text}</span>

<span className="time">{time}</span>

</div>

);

};

const UsernameInput = () => {

const username = useValue('username') || '';

const handleChange = useSetValueCallback(

'username',

(e: React.ChangeEvent<HTMLInputElement>) => e.target.value,[]);

return (

<div className="username-input">

<label>

Your name:

<input type="text" value={username} onChange={handleChange} placeholder="Enter your name" />

</label>

</div>

);

};

export const App = () => {

const store = useCreateStore(() => {

return createStore()

.setValue('username', 'User')

.setTable('messages', {

'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},

'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},

});

});

return (

<StrictMode>

<Provider store={store}>

<header>

<h1>

<img src="/favicon.svg" />

TinyBase Chat{{#if typescript}} / TypeScript{{else}} / JavaScript{{/if}} + React

</h1>

</header>

<p>

A simple chat app built with TinyBase. Messages are stored in a Table,

and you can change your username to see how data flows through the app.

</p>

<UsernameInput />

<div className="chat-container">

<div className="messages">

<SortedTableInHtmlTable tableId="messages" cellId="timestamp" descending={false} customCell={(tableId, rowId)=>

<Message rowId={rowId} />}

/>

</div>

<MessageInput />

</div>

<Inspector />

</Provider>

</StrictMode>

);

};

import {createStore} from 'tinybase';

const updateMessages = (store: any) => {

const messages = document.getElementById('messages')!;

const messageRows = store.getTable('messages');

const sortedIds = Object.keys(messageRows).sort(

(a, b) => messageRows[a].timestamp - messageRows[b].timestamp,

);

messages.innerHTML = sortedIds

.map((id) => {

const msg = messageRows[id];

const time = new Date(msg.timestamp).toLocaleTimeString();

return `

<div class="message">

<span class="username">${msg.username}:</span>

<span class="text">${msg.text}</span>

<span class="time">${time}</span>

</div>

`;

})

.join('');

};

{{#if typescript}}

export const app = () => {

const app = () => {

const store = createStore()

.setValue('username', 'User')

.setTable('messages', {

'1': {username: 'Alice', text: 'Hello!', timestamp: Date.now() - 60000},

'2': {username: 'Bob', text: 'Hi there!', timestamp: Date.now() - 30000},

});

const usernameInput = document.getElementById('username-input') as HTMLInputElement;

const messageInput = document.getElementById('message-input') as HTMLInputElement;

const sendButton = document.getElementById('send-button')!;

usernameInput!.value = store.getValue('username') as string;

usernameInput!.addEventListener('input', () => {

store.setValue('username', usernameInput!.value);

});

store.addValuesListener(() => {

usernameInput!.value = store.getValue('username') as string;

});

const sendMessage = () => {

const text = messageInput!.value.trim();

if (text) {

store.addRow('messages', {

username: store.getValue('username'),

text,

timestamp: Date.now(),

});

messageInput!.value = '';

}

};

sendButton.addEventListener('click', sendMessage);

messageInput!.addEventListener('keypress', (e) => {

if (e.key === 'Enter') {

sendMessage();

}

});

store.addTablesListener(() => updateMessages(store));

updateMessages(store);

};

{{#unless typescript}}

export {app};