installed packages

README.md

@@ -71,4 +71,11 @@ Lisa
 <3
 asal say hi 
 
-hellooo it's mee, Flip :D
\ No newline at end of file
+hellooo it's mee, Flip :D
+
+
+
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+
+npm install @mui/material @emotion/react @emotion/styled
+npm install @mui/lab
\ No newline at end of file

package.json

@@ -11,6 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.21",
     "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",

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

+
+export const DownloadLink = ({ url, fileName }: {url: string, fileName: string}) => {
+  const handleDownload = () => {
+    fetch(url)
+      .then((response) => response.blob())
+      .then((blob) => {
+        const url = window.URL.createObjectURL(new Blob([blob]));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = fileName || "downloaded-file";
+        document.body.appendChild(link);
+
+        link.click();
+
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      })
+      .catch((error) => {
+        console.error("Error fetching the file:", error);
+      });
+  };
+
+  return (
+
+      <a type="button" onClick={handleDownload} className="download-butt">
+        Download
+      </a>
+
+  );
+};
+

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>
+  );
+}
+
+

src/components/ImageEvent.tsx

+import React from 'react';
+import Event from './Event';
+import { joinClassNames } from './classNames';
+
+
+export function ImageAtom({ src, alt }:{src: string, alt: string}) {
+  return <img className='img-timeline' src={src} alt={alt}/>;
+}
+
+
+function ImageCredit({ text}:{text: string}) {
+  return (
+    <div className='img-credit'>
+      {text}
+    </div>
+  );
+}
+
+function ImageText({ text, }:{text: string}) {
+  return (
+    <div className='img-text'>
+      {text}
+    </div>
+  );
+}
+
+interface ImageEventProps{
+    date : string,
+    src: string,
+    alt: string,
+    credit: string,
+    text: string,
+    marker?: React.ReactNode,
+    children?: React.ReactNode, 
+    id: string,
+    card?: Function,
+}
+
+/**
+ * Renders a responsive image as an event.
+ */
+export const ImageEvent = ({date,src,alt,credit,text,children,id,card,}: ImageEventProps) => {
+  
+  return (
+    <Event
+      className={joinClassNames({ classNames: ['image-event'] })}
+      date={date}
+      card={card} 
+      id={id}
+      text={text} layout='default'   >
+      {text && <ImageText text={text} />}
+      <ImageAtom src={src} alt={alt} />
+      {credit && <ImageCredit text={credit} />}
+      {children}
+    </Event>
+  );
+}
+
+
+
+export default ImageEvent; 
\ No newline at end of file

src/components/TextEvent.tsx

+import React from 'react';
+import Event from './Event';
+import { joinClassNames } from './classNames';
+
+export function TextAtom({ text }:{text:string}) {
+  return (
+    <div className="text-atom">
+      {text}
+    </div>
+  );
+}
+
+interface TextEventProps {
+  children?: React.ReactNode;
+  date: string; 
+  text: string; 
+  marker?: React.ReactNode; 
+  id?: string; 
+  card?: Function; 
+}
+/**
+ * Use `TextEvent` to render text (including markdown) as an event.
+ */
+export const TextEvent = ({ children, date, text, marker, id, card}: TextEventProps) => {
+  return (
+    <Event
+      date={date}
+      marker={marker}
+      card={card}
+        
+      className={joinClassNames({classNames: ['text-event']})}
+      text={text}
+      layout='default'
+    >
+      <TextAtom text={text} />
+      {children}
+    </Event>
+  );
+}
+
+
+
+export default TextEvent; 
\ No newline at end of file

src/components/UrlButton.tsx

+
+ const UrlButton = ({ href, children }:UrlButtonProps) => {
+
+  return (
+    <a href={href} className="url-button">
+      {children}
+    </a>
+  );
+}
+export default UrlButton; 
+interface UrlButtonProps{
+  href: string,
+  children: string,
+};

src/components/classNames.tsx

+
+export function joinClassNames({classNames}:{classNames: string[]}) {
+  return classNames
+    .filter(x => {
+      try {
+        return x.trim();
+      } catch (err) {
+        return x;
+      }
+    })
+    .join(' ');
+}