exercises

src/components/My-Timeline.tsx

@@ -14,7 +14,7 @@ interface ItemProps {
 import UrlButton from './UrlButton.tsx'; */
 
 
-const TimelineItem  = ({ date, tag, color, children }:ItemProps) => (
+export const TimelineItem  = ({ date, tag, color, children }:ItemProps) => (
     <div className="timeline-item">
         <div className="timeline-item-content">
             <span className="tag" style={{ background: color }}>

src/contents/example.css

@@ -43,4 +43,18 @@
 .example-docu{
     background-color: var(--igemlightgreen);
     width: fit-content;
+}
+
+.example-easy-tag{
+    background-color: greenyellow;
+    width: fit-content;
+}
+
+.example-medium-tag{
+    background-color: orange;
+    width: fit-content;
+}
+.example-advanced-tag{
+    background-color: orangered;
+    width: fit-content;
 }
\ No newline at end of file

src/contents/example.tsx

+import { TimelineItem } from "../components/My-Timeline";
 import SimpleSlider from "../components/slider";
 
 
@@ -19,7 +20,10 @@ export function Example() {
         </div>
         <hr/>
         <div className="col">
-            <h3>Lists</h3>
+        <div className="row align-items-center">
+                <div className="col"><h4>Lists</h4></div>
+                <div className="col-1"> <div className="example-easy-tag">Easy</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise">
                 <p>a. Create a numbered list of fruits. Five items are enough. Use the HTML list element.</p> 
@@ -28,7 +32,10 @@ export function Example() {
         </div>
         <hr/>
         <div className="col">
-            <h3>Pictures</h3>
+        <div className="row align-items-center">
+                <div className="col"><h4>Picture</h4></div>
+                <div className="col-1"><div className="example-easy-tag">Easy</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise">
                 <p>a. Insert a centered picture of Sinan here. It should be half as wide as the column and have a dottet frame in our purple.</p>
@@ -37,7 +44,10 @@ export function Example() {
         </div>
         <hr/>
         <div className="col">
-            <h3>Exercise box</h3>
+        <div className="row align-items-center">
+                <div className="col"><h4>Exercise box</h4></div>
+                <div className="col-1"><div className="example-medium-tag">Medium</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise">
                 <p>Create a box that differs in looks from the rest of the site and emphazises it contains an assignment. </p>
@@ -46,14 +56,20 @@ export function Example() {
             </div>
         <hr/>
         <div className="col">
-            <h3>Exercise box</h3>
+        <div className="row align-items-center">
+                <div className="col"><h4>PDF</h4></div>
+                <div className="col-1"><div className="example-medium-tag">Medium</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise"></div>
             <p>a. Insert a pdf using our PDF component.</p>
         </div>
         <hr/>
         <div className="col">
-            <h3>Exercise box</h3>
+        <div className="row align-items-center">
+                <div className="col"><h4>Picture Slider</h4></div>
+                <div className="col-1"><div className="example-easy-tag">Easy</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise"></div>
             <p> Add a dummy sponsor to this slider.</p>
@@ -74,7 +90,10 @@ export function Example() {
         </div>
         <hr/>
         <div className="col">
-            <h4>Header</h4>
+            <div className="row align-items-center">
+                <div className="col"><h4>Header</h4></div>
+                <div className="col-1"><div className="example-advanced-tag">Advanced</div></div>
+            </div>
             <i><h6>By </h6></i>
             <div className="example-exercise">
             <p>a. Create a header file for this page. It has to be visible and therefore be added to pages.ts</p>
@@ -82,6 +101,29 @@ export function Example() {
             </div>
         </div>
         <hr/>
+        <div className="col exercise">
+            <div className="row align-items-center">
+                <div className="col"><h4>Timeline BFH</h4></div>
+                <div className="col-1 "><div className="example-easy-tag">Easy</div></div>
+            </div>
+            <i><h6>By </h6></i>
+            <div className="example-exercise">
+            <p> Add a dummy timeline item</p>
+            </div>
+            <div className="timeline-container">
+                <TimelineItem
+                date='How to SynBio'
+                tag='Workshop Session I.'
+                color='var(--text-primary)'
+                >
+                Design genetic constructs and re-write the genomic code, and plan experiments using AI. Learn how to effectively build genetic circuit systems for implementation in your iGEM project.
+                </TimelineItem>
+               
+            </div>
+        </div>
+        <hr/>
+
+        
         
       </>
     );