carrousel styles: beginning

package.json

@@ -14,19 +14,24 @@
     "@types/node": "18.11.18",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
-    "antd": "^5.1.7",
+    "antd": "^5.4.4",
     "axios": "^1.3.1",
+    "dompurify": "^3.0.5",
     "eslint": "8.33.0",
     "eslint-config-next": "13.1.6",
     "http-proxy-middleware": "^2.0.6",
+    "moment": "^2.29.4",
     "next": "13.1.6",
     "prisma": "^4.10.1",
-    "ramda": "^0.28.0",
+    "ramda": "^0.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "styled-components": "^6.0.0-rc.3",
     "typescript": "4.9.5"
   },
   "devDependencies": {
-    "@types/ramda": "^0.28.23"
+    "@types/dompurify": "^3.0.2",
+    "@types/ramda": "^0.28.23",
+    "@types/styled-components": "^5.1.26"
   }
 }

src/common/photos.tsx

@@ -0,0 +1,168 @@
+export const photos = [
+  {
+    key: 1,
+    alt: "Data Centre",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2788598/files/IMG_0053.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 2,
+    alt: "Data Centre",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2788598/files/IMG_0045.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 3,
+    alt: "Data Centre",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2788598/files/IMG_9974.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 4,
+    alt: "Data Centre",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2788598/files/IMG_0121.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 5,
+    alt: "LHCb - Control Room",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2791987/files/IMG_0574.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 6,
+    alt: "LHCb - DELPHI Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2791987/files/IMG_0595.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 7,
+    alt: "LHCb Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2791987/files/IMG_0606.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 8,
+    alt: "ALICE Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790673/files/IMG_9092.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 9,
+    alt: "ALICE Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790673/files/IMG_9104.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 10,
+    alt: "Silicon detectors",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2789072/files/IMG_0197.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 11,
+    alt: "LHCb Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790811/files/IMG_0506-2.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 12,
+    alt: "LHCb Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790811/files/IMG_0507.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 13,
+    alt: "CLIC Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790804/files/IMG_0336.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 14,
+    alt: "CLIC Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790804/files/IMG_0409.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 15,
+    alt: "ALICE Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790673/files/IMG_9089.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 16,
+    alt: "LHCb Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2791987/files/IMG_0618.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 17,
+    alt: "Silicon detectors",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2789072/files/IMG_0148.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 18,
+    alt: "Silicon detectors",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2789072/files/IMG_0164.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 19,
+    alt: "Silicon detectors",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2789072/files/IMG_0187.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 20,
+    alt: "Silicon detectors",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2789072/files/IMG_0189.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 21,
+    alt: "CMS Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790811/files/IMG_0500.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 22,
+    alt: "Antimatter Factory",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790882/files/IMG_0523.jpg?subformat=icon-1440",
+  },
+  {
+    key: 23,
+    alt: "CMS Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2790811/files/IMG_0447.jpg?subformat=icon-1440",
+  },
+
+  {
+    key: 24,
+    alt: "LHCb Experiment",
+    photographer: "Franciska-Leonora Torok",
+    src: "https://cds.cern.ch/record/2791987/files/IMG_0617.jpg?subformat=icon-1440",
+  },
+];

src/components/AT_HEADER.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import { Typography, Row, Col, Input } from "antd";
+import Link from "next/link";
+
+import MENU from "./MENU";
+import {
+  StyledWrapper,
+} from "./styled_header";
+import styled from "styled-components";
+import SearchField from "./SearchField";
+
+const StyledLinks = styled(Link)`
+color: #fff !important;
+font-family: Abolition;
+text-decoration: none;
+`
+
+function AT_HEADER() {
+  const [header, setHeader] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", changeBackground);
+  }, []);
+
+  const changeBackground = () => {
+    if (window.scrollY >= 40) {
+      setHeader(true);
+    } else {
+      setHeader(false);
+    }
+  };
+
+  return (
+      <StyledWrapper active={header}>
+        <Row
+        gutter={64}
+        style={{background:"transparent",
+        justifyContent: "space-between",
+        alignItems: "center",
+        display:"flex",
+        padding: "0 3%"}}>
+          <Col span={6}>
+            <StyledLinks  href="/">ACADEMIC TRAINING</StyledLinks>
+          </Col>
+          <Col span={12}><SearchField/></Col>
+          <Col span={6}><MENU/></Col>
+        </Row>
+
+      </StyledWrapper>
+  );
+}
+
+export default AT_HEADER;

src/components/ErrorMessage.tsx

@@ -0,0 +1,14 @@
+import { Typography } from "antd";
+
+
+const { Title } = Typography;
+
+function ErrorMessage() {
+  return (
+    <div id="loading-icon">
+      <Title>Error... please try again later</Title>
+    </div>
+  );
+}
+
+export default ErrorMessage;

src/components/HTMLTagsRenderer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DOMPurify from "dompurify";
+import PropTypes from "prop-types";
+
+interface HTMLTagRendererPRops {
+  string: string;
+  allowedTags: string[];
+}
+
+const HTMLTagRenderer = ({ string, allowedTags }: HTMLTagRendererPRops) => {
+  const cleanHTML = DOMPurify.sanitize(string, { ALLOWED_TAGS: allowedTags });
+
+  return <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />;
+};
+
+HTMLTagRenderer.propTypes = {
+  string: PropTypes.string.isRequired,
+  allowedTags: PropTypes.array.isRequired,
+};
+
+export default HTMLTagRenderer;

src/components/LOADING_ICON.css

@@ -0,0 +1,99 @@
+#loading-icon {
+  opacity: 0.6;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#loading-icon .atom {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(
+    center,
+    ellipse farthest-corner,
+    #000 0,
+    #000 5%,
+    #fff 5%,
+    #fff 5%,
+    #fff 10%,
+    #fff 100%
+  );
+  border-radius: 100px;
+  padding: 0 10px 10px 0;
+}
+
+#loading-icon h1 {
+  color: #fff;
+  font: normal normal normal 32px/42px Abolition;
+  padding: 20px;
+  letter-spacing: 1px;
+  opacity: 0.8;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#loading-icon .electron {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  background: 0 0;
+  border-radius: 150px;
+  border: 5px solid #fff;
+  box-shadow: 0 0 0 5px #fff inset, 0 0 0 5px transparent;
+  animation: electron1 1s linear infinite;
+  transform: rotateY(60deg) rotateX(-60deg) rotate(0);
+  line-height: 200px;
+  text-align: center;
+  font-size: 50px;
+  color: #000;
+}
+
+#loading-icon .electron:before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 10px;
+  border-radius: 5px;
+  background: #000;
+  top: -7.5px;
+  left: 100px;
+}
+
+#loading-icon .electron:nth-of-type(2) {
+  transform: rotateY(-60deg) rotateX(-60deg) rotate(0);
+  animation: electron2 1s linear infinite;
+}
+
+#loading-icon .electron:nth-of-type(3) {
+  transform: rotateY(75deg) rotateX(0) rotate(180deg);
+  animation: electron3 1s linear infinite;
+}
+
+@keyframes electron1 {
+  from {
+    transform: rotateY(60deg) rotateX(-60deg) rotate(0);
+  }
+  to {
+    transform: rotateY(60deg) rotateX(-60deg) rotate(360deg);
+  }
+}
+
+@keyframes electron2 {
+  from {
+    transform: rotateY(-60deg) rotateX(-60deg) rotate(0);
+  }
+  to {
+    transform: rotateY(-60deg) rotateX(-60deg) rotate(360deg);
+  }
+}
+
+@keyframes electron3 {
+  from {
+    transform: rotateY(75deg) rotateX(0) rotate(180deg);
+  }
+  to {
+    transform: rotateY(75deg) rotateX(0) rotate(540deg);
+  }
+}