Skip to content
Snippets Groups Projects
VerticalTimeline.tsx 7.17 KiB
Newer Older
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
import { BFHMoreButton } from "./Buttons";


Liliana Sanfilippo's avatar
Liliana Sanfilippo committed

interface ItemProps {
    text?: string; 
    heading?: string; 
    vorname?: string, 
    vorname2?: string, 
    nachname?: string,
    nachname2?: string,
    date: string ,
    children: React.ReactNode;
    tag: string, 
    color: string,
    csstag: string,
    url: string,
    url2?: string
}
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
interface NoButtItemProps {
    text?: string; 
    heading?: string; 
    vorname?: string, 
    vorname2?: string, 
    nachname?: string,
    nachname2?: string,
    date: string ,
    children: React.ReactNode;
    tag: string, 
    color: string,
    url: string,
    url2?: string
}
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed



export const TimelineItemPic  = ({ heading, text, vorname, nachname, date, tag, color, children, csstag, url }:ItemProps) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: color }}>
                {tag}
            </span> 
            <time>{date}</time>
            
            <hr/>
            <div className="row">
                <div className="col">
                    <figure className="snip1113 red">
                        <img src={url} alt={nachname} />
                        <figcaption>
                            <h3>{vorname} <br/> <span>{nachname}</span></h3>
                        </figcaption>
                    </figure>
                </div>
                <div className="col text-1-bfh">
                    <h5>{heading}</h5>
                    <span className="">{text}</span>
                </div>
                {children}
            </div>
            
            <BFHMoreButton it={csstag}></BFHMoreButton>
            <span className="circle" />
        </div>
    </div>
);

export const TimelineItemTwoPic  = ({ url, url2, heading, text, vorname, nachname, vorname2, nachname2, date, tag, color, children, csstag }:ItemProps) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: color }}>
                {tag}
            </span> 
            <time>{date}</time>
            
            <hr/>
            <div className="row">
                <div className="col">
                    <figure className="snip1113 red">
                        <img src={url} alt={nachname} />
                        <figcaption>
                            <h3>{vorname} <br/> <span>{nachname}</span></h3>
                        </figcaption>
                    </figure>
                </div>
                <div className="col">       
                    <figure className="snip1113 red">
                        <img src={url2} alt={nachname2} />
                        <figcaption>
                            <h3>{vorname2} <br/> <span>{nachname2}</span></h3>
                        </figcaption>
                    </figure>
                </div>
                <div className="col text-1-bfh">
                    <h5>{heading}</h5>
                    <span className="">{text}</span>
                </div>
                {children}
            </div>
            
            <BFHMoreButton it={csstag}></BFHMoreButton>
            <span className="circle" />
        </div>
    </div>
);

export const TimelineItem  = ({ date, tag, color, children, csstag }:ItemProps) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: color }}>
                {tag}
            </span> 
            <time>{date}</time>
            
            <hr/>
            {children}
            
            <BFHMoreButton it={csstag}></BFHMoreButton>
            <span className="circle" />
        </div>
    </div>
);
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
export const NoButtTimelineItem  = ({ date, tag, color, children }:NoButtItemProps) => (
    <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>
);
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed

export const PanelTimelineItem  = () => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: "var(--lightblue)" }}>
                Talks
            </span> 
            <time>Panel Discussion</time>
            <div className="row align-items-center panel-talk-gallery">
                <div className="col">
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <img className="img-round-panel" src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/traci.jpg" alt="pr-sample1" />
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <div className="small middle">Taci <br/> Haddock</div>
                </div>
                <div className="col">
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <img className="img-round-panel"  src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/anita-sifuantes.png" alt="pr-sample1" />
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <div className="small middle">Ana <br/> Sifuentes</div>
                </div>
                <div className="col">
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <img className="img-round-panel"  src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/olivia.png" alt="pr-sample1" />
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <div className="small middle">Olivia <br/> Mozolewska</div>
                </div>
                <div className="col">
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <img className="img-round-panel"   src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/middendorf.jpeg" alt="pr-sample1" />
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <div className="small middle">Lasse <br/> Middendorf</div>
                </div>
                <div className="col">
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <img className="img-round-panel"  src="https://static.igem.wiki/teams/5247/photos/meetup/speakers/nemanja.jpg" alt="pr-sample1" />
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    <div className="small middle">Nemanja <br/> Stijepovic</div>
                </div>
            </div>
            <hr/>
            <span>Panel Discussion</span>
                    <div id="panel" style={{display: "none"}}>
Kaya Lange's avatar
Kaya Lange committed
                    <p>During the panel discussion, participants shared their experiences with iGEM and synthetic biology. Leslie, an advisor for the University of Windsor's team, detailed her transition from team member to advisor and her recent involvement in synthetic biology organizations. Anna, a former iGEM participant, spoke about her background in design and her current role as a senior content strategist at Freelitics, emphasizing her passion for science communication. Tracy recounted her extensive journey within iGEM, starting as a team leader at Boston University and eventually becoming the director of the competition at iGEM headquarters. After transitioning to Asimov, she highlighted her efforts to strengthen partnerships between Asimov and iGEM, including manufacturing distribution kits for participating teams. The discussion showcased the diverse paths taken by individuals in the field and their ongoing commitment to advancing synthetic biology.</p>
Liliana Sanfilippo's avatar
Liliana Sanfilippo committed
                    </div>  
            
            <BFHMoreButton it="panel"></BFHMoreButton>
            <span className="circle" />
        </div>
    </div>
);