merge front end to server

frontend/list/elements.tsx

@@ -0,0 +1,35 @@
+import type { Attributes } from "../elementcreate";
+import * as elements from "../elementcreate";
+
+function MediaElement(attributes: Attributes, contents: string[]) {
+  const ret = <div class="col media-element" id={attributes['id']}>
+    <div class='card shadow-sm'>
+      <img class='card-img-top' src={attributes['webImg']} width='100%' onerror={attributes['imageError']}></img>
+      <div class='card-body'>
+        <h5 class='card-title'>{attributes['title']}</h5>
+        <p class='card-text'>{attributes['released']}</p>
+        <div class="d-none justify-content-between align-items-center">
+          <div class="btn-group">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick={attributes['fun']}>delete</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>;
+  return ret;
+}
+
+
+function MyHeader(attributes: Attributes, contents: string[]) {
+  return <div class="row">
+    <div class='col'>
+      <h2 class='text-center'>{attributes['title']} {attributes['num'] ? ": " + attributes['num'] : ""}</h2>
+    </div>
+  </div>;
+}
+
+function MediaContainer(attributes: Attributes, contents: string[]) {
+  return <div id={attributes['id']} class="row row-cols-2 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">{contents[0]}</div>;
+}
+
+export { MediaElement, MyHeader, MediaContainer }