import { Invoice, schema } from "https://esm.town/v/pomdtr/invoice_schema";
const example_invoice: Invoice = {
"id": "20240401",
"issued": "2024-01-01",
"due": "2024-01-15",
"currencies": [{ "code": "USD" }, { "code": "EUR", rate: 0.94 }],
"tax": 10,
"from": {
"name": "pomdtr",
},
"to": {
"name": "Val Town",
},
"items": [
{
"title": {
"en-US": "Creation of JSON Invoice Website",
"fr-FR": "Création du site JSON Invoice",
},
"quantity": 7,
"price": 70,
},
],
};
export function Editor() {
return (
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>JSON Invoice - Editor</title>
<link rel="icon" href="https://fav.farm/📃" />
<script
type="module"
src="https://raw.esm.sh/code-mirror-web-component@0.1.0/dist/json-editor.js"
>
</script>
<script type="module" src="https://esm.town/v/pomdtr/jsoninvoice_editor_script"></script>
</head>
<body class="h-screen">
<main class="flex flex-col p-2 h-full">
<nav class="flex justify-between items-center p-2">
<a href="/">
<h1 class="text-xl font-bold">JSON Invoice</h1>
</a>
</nav>
<section class="flex flex-grow gap-x-2 mt-2 overflow-hidden">
<div class="flex flex-col flex-1 border rounded divide-y divide-gray-300 border-gray-300">
<div class="flex justify-end p-2">
<div class="flex gap-x-1 items-center">
<button id="format-btn" class="px-2 py-1 text-gray-500 hover:bg-gray-100 rounded-sm border">
Format
</button>
<button id="copy-btn" class="px-2 py-1 text-gray-500 hover:bg-gray-100 rounded border">Copy</button>
</div>
</div>
<json-editor
id="editor"
class="flex-grow overflow-hidden"
schema={JSON.stringify(schema)}
code={JSON.stringify(example_invoice, null, 2)}
>
</json-editor>
</div>
<div class="flex flex-col flex-1 border rounded divide-y divide-gray-300 border-gray-300">
<div class="flex justify-between p-2 items-center">
<div class="flex gap-x-5 items-center">
<div class="flex gap-x-2 items-center">
<label for="languages">Language:</label>
<select
id="languages"
class="px-2 py-1 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg"
>
<option selected>en-US</option>
<option>fr-FR</option>
</select>
</div>
<div class="flex gap-x-2 items-center">
<label for="currencies">Currency:</label>
<select
id="currencies"
class="px-2 py-1 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg"
>
<option selected>USD</option>
<option>EUR</option>
</select>
</div>
</div>
<div class="flex gap-x-1 items-center">
<button id="print-btn" class="px-2 py-1 bg-amber-500 hover:bg-amber-400 rounded text-white border">
Print
</button>
</div>
</div>
<iframe src="about:blank" class="flex-grow" id="preview"></iframe>