/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function Card({ content }) { return (

{content.title}

{content.content_type}

{content.cover_image && ( {content.title}

)}

ID: {content.id}

Order: {content.order}

Modified: {new Date(content.modified).toLocaleString()}

Start: {new Date(content.start).toLocaleString()}

{content.description && (

Description:

)}

{content.exam_url && ( Take Exam )} {content.video_url && ( Watch Video )}

); } function JSONCards({ data }) { if (!data || !data.results || !data.results.contents) { return

Invalid JSON data structure

; } return (

Total Count: {data.count}

Per Page: {data.per_page}

{data.results.contents.map((item) => ( ))}

); } function App() { const [jsonInput, setJsonInput] = useState(''); const [jsonData, setJsonData] = useState(null); const [error, setError] = useState(''); const handleInputChange = (e) => { setJsonInput(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); try { const parsedData = JSON.parse(jsonInput); setJsonData(parsedData); setError(''); } catch (err) { setError('Invalid JSON: ' + err.message); setJsonData(null); } }; return (

📚 Course Content Viewer

<button type="submit">Generate Cards</button>
      </form>
      {error && <p className="error">{error}</p>}
      {jsonData && <JSONCards data={jsonData} />}
      <p className="footer">
        View source on <a href={import.meta.url.replace("esm.town", "val.town")}>Val Town</a>
      </p>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Course Content Viewer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
  {
    headers: {
      "content-type": "text/html",
    },
  });
}

const css = `
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 20px;
  background-color: #f0f4f8;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #2c3e50;
  font-size: 2.5em;
  margin-bottom: 30px;
}

form {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

textarea {
  margin-bottom: 15px;
  padding: 15px;
  font-family: monospace;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: vertical;
}

button {
  padding: 12px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #2980b9;
}

.error {
  color: #e74c3c;
  font-weight: bold;
  padding: 10px;
  background-color: #fadbd8;
  border-radius: 5px;
}

.summary {
  background-color: #eaf2f8;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #3498db;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 1.2em;
}

.badge {
  background-color: #2ecc71;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8em;
}

.card-body {
  padding: 20px;
}

.cover-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 15px;
}

.card p {
  margin: 10px 0;
  font-size: 0.9em;
}

.description {
  margin-top: 15px;
  font-size: 0.9em;
}

.card-footer {
  padding: 15px;
  background-color: #f8f9fa;
  display: flex;
  justify-content: space-around;
}

.button {
  display: inline-block;
  padding: 8px 15px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

.footer {
  margin-top: 30px;
  text-align: center;
  font-size: 0.9em;
  color: #7f8c8d;
}

.footer a {
  color: #3498db;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .container {
    padding: 20px;
  }

.card-container {
    grid-template-columns: 1fr;
  }
}
`;</article></body></html>

ezzzz

Version 1