From 22f59ca6196a66ffaebb1eea8dd147cb9fbdb5ff Mon Sep 17 00:00:00 2001
From: Alex Stan <90788596+Ultra980@users.noreply.github.com>
Date: Sat, 1 Jun 2024 15:44:25 +0300
Subject: [PATCH] Added a TopicCard component

Signed-off-by: Alex Stan <90788596+Ultra980@users.noreply.github.com>
---
 app/components/form.tsx       |   8 +-
 app/components/topic_card.tsx |  44 ++++++++++
 app/sessionconfig/page.tsx    | 157 +++++++---------------------------
 3 files changed, 78 insertions(+), 131 deletions(-)
 create mode 100644 app/components/topic_card.tsx

diff --git a/app/components/form.tsx b/app/components/form.tsx
index 10c7ac1..71457a0 100644
--- a/app/components/form.tsx
+++ b/app/components/form.tsx
@@ -27,13 +27,13 @@ const Form = <T,>({ initialData, onSubmit }) => {
   return ( 
     <form onSubmit={handleSubmit} className="flex">
       <div>
-        {initialData.entries.map( (key, val) => {
+        {Object.entries( initialData ).map( (key, val) => {
           return(
             <input
               type = { typeof( val ) == typeof( 0 ) ? "number" : "text" /* pretty hacky, we should change this */ } 
-              id = {key}
-              name = {key}
-              value = {formData[ key ]}
+              id = {key[0]}
+              name = {key[0]}
+              value = {formData[key[0]]}
               onChange = {handleChange}
               required
             />)})}
diff --git a/app/components/topic_card.tsx b/app/components/topic_card.tsx
new file mode 100644
index 0000000..112a3fa
--- /dev/null
+++ b/app/components/topic_card.tsx
@@ -0,0 +1,44 @@
+
+const TopicCard = ({ title, children, link }) => {
+  return(
+    <div className="mx-auto mt-16 max-w-2xl rounded-3xl sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+    <svg
+        viewBox="0 0 1024 1024"
+        className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+        aria-hidden="true"
+      >
+        <circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fillOpacity="0.7" />
+        <defs>
+          <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
+            <stop stopColor="#7775D6" />
+            <stop offset={1} stopColor="#E935C1" />
+          </radialGradient>
+        </defs>
+      </svg>
+      <div className="p-8 sm:p-10 lg:flex-auto ">
+        <h3 className="text-2xl font-bold tracking-tight text-gray-200">{title}</h3>
+        <p className="mt-6 text-base leading-7 text-gray-200">
+          {children} 
+        </p>
+      </div>
+      <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
+        <div className="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
+          <div className="mx-auto max-w-xs px-8">
+            <p className="mt-6 flex items-baseline justify-center gap-x-2">
+              <span className="text-5xl font-bold tracking-tight text-gray-900">Start</span>
+              <span className="text-sm font-semibold leading-6 tracking-wide text-gray-900">now!</span>
+            </p>
+            <a
+              href={link}
+              className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Begin
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopicCard;
\ No newline at end of file
diff --git a/app/sessionconfig/page.tsx b/app/sessionconfig/page.tsx
index d6785fe..172e4b5 100644
--- a/app/sessionconfig/page.tsx
+++ b/app/sessionconfig/page.tsx
@@ -1,4 +1,5 @@
 import { CheckIcon } from '@heroicons/react/20/solid'
+import TopicCard from '../components/topic_card'
 
 const includedFeatures = [
   'Private forum access',
@@ -8,136 +9,38 @@ const includedFeatures = [
 ]
 
 export default function Example() {
+
+    const cards = [
+      ["Learn cybersecurity", "Learning cybersecurity is like becoming a guardian of the digital realm.\nIt's about mastering the art of protecting information, systems, and networks from cyber threats.\nFrom understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.", "/learn/cybersec" ],
+      ["Learn geography", "It's cool ig", "/learn/geography"],
+      ["Learn C++", "Don't.", "/learn/cpp"],
+      ["Learn C", "Do.", "/learn/c"]
+    ];
   return (
+    
     <div className="bg-black py-24 sm:py-32">
-        <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
+      <div style={{ display:"flex", alignItems: 'center', justifyContent: 'center', paddingTop:'40px'}}><img className="flex" src="/logo-no-background.png" height="auto" width="40%" style={{ alignSelf: 'center'}}></img></div>
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
-        <svg
-            viewBox="0 0 1024 1024"
-            className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
-            aria-hidden="true"
-          >
-            <circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fillOpacity="0.7" />
-            <defs>
-              <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
-                <stop stopColor="#7775D6" />
-                <stop offset={1} stopColor="#E935C1" />
-              </radialGradient>
-            </defs>
-          </svg>
-          <div className="p-8 sm:p-10 lg:flex-auto ">
-            <h3 className="text-2xl font-bold tracking-tight text-gray-200">Learn cybersecurity</h3>
-            <p className="mt-6 text-base leading-7 text-gray-200">
-              Learning cybersecurity is like becoming the guardian of the digital realm. 
-              It's about mastering the art of protecting information, systems, and networks from cyber threats. 
-              From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. 
-            </p>
-          </div>
-          <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-            <div className="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
-              <div className="mx-auto max-w-xs px-8">
-                <p className="mt-6 flex items-baseline justify-center gap-x-2">
-                  <span className="text-5xl font-bold tracking-tight text-gray-900">Start</span>
-                  <span className="text-sm font-semibold leading-6 tracking-wide text-gray-900">now!</span>
-                </p>
-                <a
-                  href="#"
-                  className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                >
-                  Begin
-                </a>
-                <p className="mt-6 text-xs leading-5 text-gray-600">
-                  Take a short quiz to begin learning faster than ever
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
-        <svg
-            viewBox="0 0 1024 1024"
-            className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
-            aria-hidden="true"
-          >
-            <circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fillOpacity="0.7" />
-            <defs>
-              <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
-                <stop stopColor="#7775D6" />
-                <stop offset={1} stopColor="#E935C1" />
-              </radialGradient>
-            </defs>
-          </svg>
-          <div className="p-8 sm:p-10 lg:flex-auto ">
-            <h3 className="text-2xl font-bold tracking-tight text-gray-200">Learn cybersecurity</h3>
-            <p className="mt-6 text-base leading-7 text-gray-200">
-              Learning cybersecurity is like becoming the guardian of the digital realm. 
-              It's about mastering the art of protecting information, systems, and networks from cyber threats. 
-              From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. 
-            </p>
-          </div>
-          <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-            <div className="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
-              <div className="mx-auto max-w-xs px-8">
-                <p className="mt-6 flex items-baseline justify-center gap-x-2">
-                  <span className="text-5xl font-bold tracking-tight text-gray-900">Start</span>
-                  <span className="text-sm font-semibold leading-6 tracking-wide text-gray-900">now!</span>
-                </p>
-                <a
-                  href="#"
-                  className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                >
-                  Begin
-                </a>
-                <p className="mt-6 text-xs leading-5 text-gray-600">
-                  Take a short quiz to begin learning faster than ever
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24 lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
-        <svg
-            viewBox="0 0 1024 1024"
-            className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
-            aria-hidden="true"
-          >
-            <circle cx={512} cy={512} r={512} fill="url(#759c1415-0410-454c-8f7c-9a820de03641)" fillOpacity="0.7" />
-            <defs>
-              <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
-                <stop stopColor="#7775D6" />
-                <stop offset={1} stopColor="#E935C1" />
-              </radialGradient>
-            </defs>
-          </svg>
-          <div className="p-8 sm:p-10 lg:flex-auto ">
-            <h3 className="text-2xl font-bold tracking-tight text-gray-200">Learn cybersecurity</h3>
-            <p className="mt-6 text-base leading-7 text-gray-200">
-              Learning cybersecurity is like becoming the guardian of the digital realm. 
-              It's about mastering the art of protecting information, systems, and networks from cyber threats. 
-              From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks. 
-            </p>
-          </div>
-          <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
-            <div className="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
-              <div className="mx-auto max-w-xs px-8">
-                <p className="mt-6 flex items-baseline justify-center gap-x-2">
-                  <span className="text-5xl font-bold tracking-tight text-gray-900">Start</span>
-                  <span className="text-sm font-semibold leading-6 tracking-wide text-gray-900">now!</span>
-                </p>
-                <a
-                  href="#"
-                  className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-                >
-                  Begin
-                </a>
-                <p className="mt-6 text-xs leading-5 text-gray-600">
-                  Take a short quiz to begin learning faster than ever
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
+        { cards.map((elem) => {
+          return (<TopicCard title={elem[0]} link={elem[2]}>{elem[1]}</TopicCard>)
+        })} 
+        {/*
+        <TopicCard title = "Learn cybersecurity">
+          Learning cybersecurity is like becoming a guardian of the digital realm. 
+          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
+          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
+        </TopicCard>
+        <TopicCard title = "Learn geography">
+          Learning cybersecurity is like becoming a guardian of the digital realm. 
+          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
+          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
+        </TopicCard>
+        <TopicCard title = "Learn C++">
+          Learning cybersecurity is like becoming a guardian of the digital realm. 
+          It's about mastering the art of protecting information, systems, and networks from cyber threats. 
+          From understanding encryption algorithms to detecting malware, every lesson equips you with tools to fortify against cyber-attacks.
+        </TopicCard>
+  */}
       </div>
     </div>
   )