From 0ae07a64b123e76cf85b27303ef402923ea1404d Mon Sep 17 00:00:00 2001
From: liliana <liliana.sanfilippo@uni-bielefeld.de>
Date: Thu, 25 Jul 2024 14:11:12 +0200
Subject: [PATCH] exercises

---
 src/components/My-Timeline.tsx |  2 +-
 src/contents/example.css       | 14 +++++++++
 src/contents/example.tsx       | 54 ++++++++++++++++++++++++++++++----
 3 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/src/components/My-Timeline.tsx b/src/components/My-Timeline.tsx
index 43286989..105e9b2a 100644
--- a/src/components/My-Timeline.tsx
+++ b/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 }}>
diff --git a/src/contents/example.css b/src/contents/example.css
index f45d706e..df7369fc 100644
--- a/src/contents/example.css
+++ b/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
diff --git a/src/contents/example.tsx b/src/contents/example.tsx
index 0ebc737c..721c5ded 100644
--- a/src/contents/example.tsx
+++ b/src/contents/example.tsx
@@ -1,3 +1,4 @@
+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/>
+
+        
         
       </>
     );
-- 
GitLab