added a semi-functional typing question

Signed-off-by: Ioan Chelaru Cristian <iccjoc@localhost.localdomain>

app/components/form-question.tsx

@@ -19,21 +19,7 @@ const FormQuestion = ({question}: {question: Question}) => {
   const formSubmit = (data: FormData) => setFormData( data );
 
   return (
-    <div className="bg-black">
       <div className="relative isolate px-6 pt-14 lg:px-8">
-        <div
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-          aria-hidden="true"
-        >
-          <div
-            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-          />
-        </div>
-        <Logo/>
         <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
           <div className="text-center">
             <h3 className="text-s font-bold tracking-tight text-gray-500 sm:text-s">This does not work yet, and is work in progress</h3>
@@ -59,20 +45,7 @@ const FormQuestion = ({question}: {question: Question}) => {
                 Send
               </Button>
             </form> */ }
-            <Form fields={[{type: FieldType.text, name: "meow", required: false, placeholder: "ermmm what the sigma"},{type: FieldType.text, name: "meow", required: false, placeholder: "ermmm what the sigma"}]} onSubmit={formSubmit} />
+            <Form fields={[{type: FieldType.text, name: "meow", required: false, placeholder: "Insert your answer here:"}]} onSubmit={formSubmit} />
-          </div>
-        </div>
-        <div
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-          aria-hidden="true"
-        >
-          <div
-            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
-            }}
-          />
           </div>
         </div>
       </div>

app/components/link-button.tsx

@@ -6,7 +6,7 @@ const LinkButton = ({text, href, onPress}: {text: string, href: string, onPress?
   const [buttonHovered, setButtonHovered] = useState( false );
   const [buttonPressed, setButtonPressed] = useState( false );
   return (
-    <div className="mt-10 flex items-center justify-center gap-x-6 lg:justify-start">
+    <div className="mt-3 flex items-center justify-center gap-x-6 lg:justify-start">
     <motion.a
       href={href}  
       className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"

app/components/question_component.tsx

@@ -49,7 +49,7 @@ const QuestionView = ({ question, setState, state }: { question: Question, setSt
             leave="transition-opacity duration-150"
             leaveFrom="opacity-90"
             leaveTo="opacity-0">
-          <h1 className="text-4xl font-bold tracking-tight text-gray-50">
+          <h1 className="text-4xl font-bold tracking-tight text-gray-50 sm:text-6xl">
               {question.text}
           </h1>
         </Transition>

app/components/topic_card.tsx

@@ -2,11 +2,20 @@
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import LinkButton from './link-button';
+import { Radio, RadioGroup } from '@headlessui/react';
+import { CheckCircleIcon } from '@heroicons/react/24/outline';
+
 const TopicCard = ({ title, children, link }: { title: string, children: any, link: string }) => {
+  const types = [
+    { name: 'Classic', desc: 'Answer with \'I knew that\', and \'I didn\'t know\'.', disabled: false },
+    { name: 'Type', desc: 'Answer with typing in a prompt.', disabled: true },
+    { name: 'Quiz', desc: 'Answer with 4 buttons, only one is correct.', disabled: true},
+    { name: 'Mixed', desc: 'From all of the above.', disabled: true}
+  ]
   const [clicked, setClicked] = useState( false );
   const [hovered, setHovered] = useState( false );
   return (
-    <motion.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" style={{marginTop: '20px', paddingTop: '0px', paddingBottom: '24px'}}
+    <motion.div className="mx-auto mt-8 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" style={{marginTop: '5px', paddingTop: '34px', paddingBottom: '0px'}}
       animate={{x: hovered? 10 : 0, opacity: clicked ? 0.5 : 1 }} onMouseEnter={()=>setHovered(true)} onMouseLeave={()=>setHovered(false)}>
     <svg
         viewBox="0 0 1024 1024"
@@ -23,14 +32,34 @@ const TopicCard = ({ title, children, link }: { title: string, children: any, li
       </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">
+        <p className="mt-2 text-base leading-6 text-gray-200">
           {children} 
         </p>
       </div>
       <div 
-        className="-mt-2 p-2 lg:mt-0 lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center"
+        className="-mt-5 p-2 lg:mt-0 lg:max-w-md lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center"
         style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
       >
+            <RadioGroup aria-label="Type" className="space-y-1">
+                {types.map((plan) => (
+                    <Radio
+                        key={plan.name}
+                        value={plan}
+                        disabled={plan.disabled}
+                        className="group relative flex cursor-pointer rounded-lg bg-white/5 py-4 px-5 text-white shadow-md transition focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
+                    >
+                    <div className="flex w-full items-center justify-between">
+                        <div className="text-sm/6 pr-5">
+                            <p className="font-semibold text-white">{plan.name}</p>
+                            <div className="flex gap-2 text-white/50">
+                                <div>{plan.desc}</div>
+                            </div>
+                        </div>
+                        <CheckCircleIcon className="size-5 opacity-0 transition group-data-[checked]:opacity-100" />
+                    </div>
+                    </Radio>
+                ))}
+            </RadioGroup>
             {/* <a
               href={link}
               className="rounded-md text-sm font-semibold border text-gray-200 shadow-sm hover:text-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"

app/learn/[category]/page.tsx

@@ -119,11 +119,7 @@ const Page = ({ params }: { params: { category: string }}) => {
           }
         })()}
 
-        {(()=>{
+        
-          if ( !questions[ 0 ] )
-            return <></>;
-          return (index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>;
-        })()}
 
         {/* {questions[ 0 ] ? ((index < 10 && questions[ index ]) ? <QuestionView question={questions[ index ]} state = {state} setState={setState}/> : <ResultScreen state={state}/>) : null} */}
 

app/lib/api.ts

@@ -1,5 +1,5 @@
 // the base URL of the api; all requests start with it
-const base_url: string = "https://api.phite.ro/";
+const base_url: string = "http://localhost:4000/";
 
 /*
 export const makeGetRequest = async<T> (path: string): Promise<T> => {