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/Event.tsx

-import React from 'react';
-import Card from './Card';
-import { joinClassNames } from './classNames';
-
-
-interface EventProps{
-  children?: React.ReactNode;
-  date: string; 
-  text: string; 
-  marker?: React.ReactNode; 
-  className: string; 
-  card?: Function; 
-  layout: string; 
-  id?: string; 
-}
-
-export default function Event({ date, children, className, card, layout, id}: EventProps) {
-  
-
-
-  let CardComponent;
-  if (typeof card === 'function') {
-    CardComponent = card({ date, children });
-  } else {
-    CardComponent = <Card  children={children}/>;
-  }
-
-  const classNames = joinClassNames({classNames:['event', className, layout]});
-
-  return (
-    <div className={classNames}>
-
-
-      <div className={`card-col`} id={id}>{CardComponent}</div>
-    </div>
-  );
-}
-
-