KidoKoding/frontend/src/pages/learn/view/page.tsx

import { useEffect, useMemo, useState } from "react";
import Playground from "../../../components/containers/playground";
import { Braces, Code, CodeXml, PencilRuler } from "lucide-react";
import { TestCase } from "../../../lib/playground";
import Button from "@ui/button";
import { cn } from "@/lib/utils";
import { CodeEditorFile } from "@/components/containers/code-editor";
import ThemeSelector from "@/components/containers/theme-selector";

const initialBody = `
<pre id="print-area"></pre>
`;

const initialInitScript = `
const printAreaEl = document.getElementById("print-area");
function print(...args) {
    printAreaEl.innerHTML += args.map(String).join('');
}
`;

const initialScript = `
let a = 4;

// Hasil dari 'a' dikali 2
let b = a * 2;

// Hasil dari penjumlahan a dan b
let c = // lengkapi disini

// Fungsi untuk menambahkan dua bilangan
function tambah(a, b) {
  // lengkapi disini
}

for (let i=0; i<=5; i++) {
  for (let j=0; j<=i; j++) {
    print('*');
  }
  print('\\n');
}
`;

const initialStyle = `
body {
    padding: 1rem;
}

button {
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    display: block;
}

button:hover {
    background: #e5e5e5;
}
`;

const LearnViewPage = () => {
  const files: CodeEditorFile[] = useMemo(() => {
    return [
      {
        uri: "body.html",
        // title: "HTML",
        // icon: CodeXml,
        lang: "html",
        content: initialBody,
        hidden: true,
      },
      {
        uri: "init.js",
        icon: Braces,
        lang: "javascript",
        content: initialInitScript,
        hidden: true,
      },
      {
        uri: "script.js",
        title: "Script",
        icon: Braces,
        lang: "javascript",
        content: initialScript,
        pinned: true,
      },
      // {
      //   uri: "style.css",
      //   title: "Style",
      //   icon: PencilRuler,
      //   lang: "css",
      //   content: initialStyle,
      // },
    ];
  }, []);

  const tests: TestCase[] = [
    {
      name: "Hasil dari b = a x 2",
      test: "b",
      expected: 8,
    },
    {
      name: "Hasil dari c = a + b",
      test: "c",
      expected: 12,
    },
    {
      name: "Hasil 1 + 2",
      test: "tambah(1, 2)",
      expected: 3,
    },
  ];

  return (
    <div className="flex flex-row items-stretch h-screen overflow-hidden">
      <aside className="w-[250px] bg-base-100 fixed top-0 left-0 h-full z-10 -translate-x-full md:static md:translate-x-0">
        Sidebar
        <ThemeSelector
          className="absolute left-4 bottom-4"
          position="top"
          align="default"
        />
      </aside>

      <main className="flex-1 bg-base-100 overflow-y-auto">
        <article className="p-4 md:p-8 prose">
          <h1>Lorem Ipsum</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            laoreet suscipit pretium. Nunc vehicula interdum condimentum.
            Maecenas vitae enim dui. Vestibulum luctus tincidunt nisl et
            molestie. Mauris sollicitudin velit consectetur ante porttitor, quis
            commodo justo porta. Integer vestibulum ante urna, et fringilla
            lorem faucibus egestas. Nunc laoreet mollis blandit. Fusce ut mauris
            nibh. Sed orci dolor, fringilla a magna quis, aliquam imperdiet
            purus. Nullam tellus sapien, luctus non volutpat non, venenatis eu
            purus. Etiam elit arcu, dapibus nec pulvinar eu, blandit sed lacus.
            Aliquam euismod id ligula in blandit.
          </p>

          <p>
            In vel vulputate dolor. Duis bibendum viverra ex, sit amet molestie
            dui pulvinar quis. Donec varius dictum orci. Donec sollicitudin quam
            eu massa ullamcorper porta. In sed ex mauris. Vestibulum ante ipsum
            primis in faucibus orci luctus et ultrices posuere cubilia curae;
            Nunc ultrices, enim a porttitor feugiat, leo nisl venenatis enim, in
            pretium velit leo quis purus. Quisque eget sapien sem. Pellentesque
            hendrerit, sapien ac sodales vestibulum, massa nulla sollicitudin
            neque, vitae condimentum metus leo nec magna. Aliquam sit amet
            porttitor leo. Morbi a massa nec magna ultrices efficitur et
            vulputate nunc. Aliquam id convallis nisl.
          </p>

          <p>
            Praesent efficitur quis dui nec sagittis. Vestibulum finibus
            vulputate nisi a ultricies. Quisque auctor nunc ut felis placerat,
            eget scelerisque sapien rhoncus. Suspendisse sollicitudin sed lacus
            in mattis. Duis ut egestas arcu. Integer convallis consequat dolor.
            Nulla tincidunt sem nunc, rutrum congue eros ornare euismod. Quisque
            vitae massa risus. Sed sodales facilisis iaculis. Etiam interdum
            massa sit amet purus consequat finibus at sit amet mauris.
            Vestibulum dapibus velit sit amet mauris lobortis, ut scelerisque
            nulla lacinia. Donec quis dictum leo, id luctus mi.
          </p>
        </article>
      </main>

      <Playground
        className="flex-1"
        files={files}
        tests={tests}
        persistId="test"
        // showHiddenFiles
        // showLogs={false}
        // preview
      />
    </div>
  );
};

export default LearnViewPage;