My-Timeline.tsx

interface ItemProps {
    date: string | undefined,
    children: React.ReactNode;
    tag: string, 
    color: string 
}

/* import ImageEvent from './ImageEvent.tsx';
import UrlButton from './UrlButton.tsx'; */


const TimelineItem  = ({ date, tag, color, children }:ItemProps) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: color }}>
                {tag}
            </span> 
            <time>{date}</time>
            <hr/>
            {children}
            <span className="circle" />
        </div>
    </div>
);



export function MyTimeline () {
    return(
        <>
            <div className="timeline-container">
                <div className='timeline-begin'>
                Opening
                </div>

                <TimelineItem
                date='Scientific Talk I.'
                tag= 'Talks'
                color='var(--lightblue)'
                >
                    Scientific Talk 1 by Kristian Müller and Ram Shakar
                    {/* 
                            <ImageEvent
                        date="4/13/19"
                        text="You can embed images..."
                        src="https://res.cloudinary.com/dovoq8jou/image/upload/v1564772194/jellyfish.jpg"
                        alt="jellyfish swimming"
                        credit="Photo by [@tavi004](https://unsplash.com/@tavi004)" 
                        id='Scientific Talk I.'>
                        
                            <div>
                                <UrlButton href="https://unsplash.com/search/photos/undersea">
                                View more undersea photos
                                </UrlButton>
                            </div>
                            </ImageEvent> */}

                </TimelineItem>
                <TimelineItem
                date='How to Wiki'
                tag='Workshop Session I.'
                color='var(--text-primary)'
                >
                Learning the basics of Wiki coding and design. In this workshop, the participants geined expertise to elevate their teams wiki.
                </TimelineItem>
                <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>
                <TimelineItem
                date='How to use AI as a scientist'
                tag='Workshop Session I.'
                color='var(--text-primary)'
                >
                    <h5>Modern problems require modern solutions</h5>
                     Computational technologies are getting more in the focus of scientific research. Integration of generative KI like GenAI bypass limitations and offers potential risks - learn how to implement Artificial Intelligence.
                </TimelineItem>
                <TimelineItem
                date='Scientific Talk II.'
                tag= 'Talks'
                color='var(--lightblue)'
                >
                    Scientific Talk 2 by Karla Wagner
                </TimelineItem>
                <TimelineItem
                date='Team project presentations'
                tag= 'Team presentations'
                color='var(--accent-primary'
                >
                    <h5>Team project presentations</h5>
                </TimelineItem>
                <TimelineItem
                date='Poster Exhibition Booth'
                tag= 'Team presentations'
                color='var(--accent-primary)'
                >
                    <h5>Poster Exhibition Booth </h5>
                </TimelineItem>
                <TimelineItem
                date='How to work safe'
                tag='Workshop Session II.'
                color='var(--text-primary)'
                >
                    <h5>About Dual-use and Biosafety</h5>
                    Novel technologies opened possibilities and risks. Learn how you implement Safety and Security Strategies within your project and think more responsible in terms of Dual Use.
                </TimelineItem>
                <TimelineItem
                date='How to Communicate Science'
                tag='Workshop Session II.'
                color='var(--text-primary)'
                >
                    Experience how science communication could be. Learn creative and funny ways to communicate difficult topics. 
                    Think outside the box and train your skills.    
                </TimelineItem>
                <TimelineItem
                date='How to Pitch Your Project'
                tag='Workshop Session II.'
                color='var(--text-primary)'
                > 
                Image you have only three minutes with your boss to sell your idea... 
                After our workshop you learned techniques to sell every pen and even more to every boss on the planet.       
                </TimelineItem>
                <TimelineItem
                date='How to Multi Media'
                tag='Workshop Session II.'
                color='var(--text-primary)'
                > 
                
                Learn the basics of filmmaking and video production. 
                Look behind the scenes and get in touch with professionals. 
                Train your skills to direct iGEM-related videos and movies.
                </TimelineItem>
                <TimelineItem
                date='Panel Discussion'
                tag= 'Talks'
                color='var(--lightblue)'
                >
                    Panel Discussion
                </TimelineItem>
                <TimelineItem
                date='iGEMer Ted Talks'
                tag= 'Talks'
                color='var(--lightblue)'
                >
                    iGEMer Ted Talks
                </TimelineItem>
                <TimelineItem
                date='Science Slam Session'
                tag= 'Talks'
                color='var(--lightblue)'
                >
                    Science Slam Session
                </TimelineItem>
                <div className='timeline-end'>
                    Award Ceremony
                </div>
            </div>
            
            </>
        )
    
}