src/components/Boxes.tsx

@@ -15,16 +15,51 @@ export function BulbBox({title, children}:{title: string, children: React.ReactN
     )
 }
 
-export function InfoBox({title, children}:{title: string, children: React.ReactNode}){
+export function QaBox({q, a}:{q: string, a: React.ReactNode}){
+  return(
+     <div className="qabox">
+      <div className="question-bubble">
+        <div className="row">
+        {q}
+        </div>
+      </div>
+      <div className="question-bubble">
+        <div className="row">
+        {a}
+        </div>
+      </div>
+     </div>
+  )
+}
+export function SpecialQaBox({q, children}:{q: string, children: React.ReactNode}){
+  return(
+     <div className="qabox">
+      <div className="question-bubble">
+        <div className="row">
+        {q}
+        </div>
+      </div>
+      <div className="question-bubble">
+        <div className="row">
+        {children}
+        </div>
+      </div>
+     </div>
+  )
+}
+
+
+
+export function InfoBox({title, children, id}:{title: string, children: React.ReactNode, id: string}){
     return(
-        <aside className="hint-container info">
+        <aside className="hint-container info" id={id}>
           <p className="hint-container-title">
             {title}
           </p>
           <div className="v-card-text">
-            <p>
+            <div>
                 {children}
-            </p>
+            </div>
           </div>
         </aside>
     )
@@ -42,4 +77,34 @@ export function WarnBox({title, children}:{title: string, children: React.ReactN
           </div>
         </aside>
     )
+}
+
+export function BlueInfoBox({title, children}:{title: string, children: React.ReactNode}){
+  return(
+      <aside className="hint-container danger">
+        <p className="hint-container-title">
+          {title}
+        </p>
+        <div className="v-card-text">
+          <p>
+              {children}
+          </p>
+        </div>
+      </aside>
+  )
+}
+
+export function NoteBox({title, children, id}:{title: string, children: React.ReactNode, id: string}){
+  return(
+      <aside className="hint-container note" id={id}>
+        <p className="hint-container-title">
+          {title}
+        </p>
+        <div className="v-card-text">
+          <p>
+              {children}
+          </p>
+        </div>
+      </aside>
+  )
 }
\ No newline at end of file

src/components/Card.tsx

-import React from 'react';
-
-
-
-
- export const Card = ({children}: CardProps) => {
-  return (
-    
-    <div className="card-col">
-      {children}
-    </div>
-  );
-}
-
-interface CardProps {
-  children: React.ReactNode
-}
-
-
-
-export default Card; 
\ No newline at end of file

src/components/Code.tsx

+export function Code({children}:{children: React.ReactNode} ){
+
+    return(
+        <div className="codesnippet">
+            <code>
+                {children}
+            </code>
+        </div>
+    )
+}
\ No newline at end of file