Under construction ribbons

Author: driekwartsbroek

src/components/ConstructionRibbon.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+const ConstructionRibbon: React.FC = () => {
+  return (
+    <div className="absolute top-0 left-0 w-full bg-yellow-400 overflow-hidden">
+      <div className="relative h-8 flex items-center">
+        <motion.div
+          className="whitespace-nowrap text-black font-bold"
+          animate={{
+            x: [0, -1000],
+          }}
+          transition={{
+            x: {
+              repeat: Infinity,
+              repeatType: "loop",
+              duration: 20,
+              ease: "linear",
+            },
+          }}
+        >
+          UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION
+          &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER
+          CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp;
+          UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION
+          &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER
+          CONSTRUCTION &nbsp;&nbsp;&nbsp; UNDER CONSTRUCTION &nbsp;&nbsp;&nbsp;
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default ConstructionRibbon;

src/components/WorkDetailPanel.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import WindowPanel from "@/components/WindowPanel";
 import Image from "next/image";
+import ConstructionRibbon from "./ConstructionRibbon";
 
 interface WorkDetailPanelProps {
   id: string;
@@ -35,44 +36,47 @@ const WorkDetailPanel: React.FC<WorkDetailPanelProps> = ({
       showBackArrow={false}
       showBreadcrumbs={false}
       onClose={onClose}
-      className="absolute w-[80vw] max-w-5xl max-h-[75vh]"
+      className="absolute w-[80vw] max-w-5xl max-h-[75vh] overflow-hidden"
       isDraggable={true}
       zIndex={zIndex}
       onFocus={onFocus}
     >
-      <div className="overflow-y-auto max-h-[calc(90vh-4rem)] px-8 py-6">
-        <h1 className="text-4xl font-bold mb-4">{title}</h1>
-        <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
-          {duration} | {location}
-        </p>
-        <div className="flex items-center mb-8">
-          <Image
-            src={imageUrl}
-            alt={title}
-            width={120}
-            height={120}
-            className="rounded-lg mr-6"
-          />
-          <p className="text-xl leading-relaxed">{description}</p>
-        </div>
-        <h2 className="text-2xl font-semibold mb-4">Responsibilities</h2>
-        <ul className="list-disc pl-5 mb-8 space-y-2">
-          {responsibilities.map((responsibility, index) => (
-            <li key={index} className="text-gray-600 dark:text-gray-300">
-              {responsibility}
-            </li>
-          ))}
-        </ul>
-        <h2 className="text-2xl font-semibold mb-4">Technologies Used</h2>
-        <div className="flex flex-wrap gap-2 mb-8">
-          {technologies.map((tech, index) => (
-            <span
-              key={index}
-              className="bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm"
-            >
-              {tech}
-            </span>
-          ))}
+      <div className="relative">
+        <ConstructionRibbon />
+        <div className="overflow-y-auto max-h-[calc(90vh-4rem)] px-8 py-4 mt-8">
+          <h1 className="text-4xl font-bold mb-4">{title}</h1>
+          <p className="text-lg text-gray-600 dark:text-gray-300 mb-8">
+            {duration} | {location}
+          </p>
+          <div className="flex items-center mb-8">
+            <Image
+              src={imageUrl}
+              alt={title}
+              width={120}
+              height={120}
+              className="rounded-lg mr-6"
+            />
+            <p className="text-xl leading-relaxed">{description}</p>
+          </div>
+          <h2 className="text-2xl font-semibold mb-4">Responsibilities</h2>
+          <ul className="list-disc pl-5 mb-8 space-y-2">
+            {responsibilities.map((responsibility, index) => (
+              <li key={index} className="text-gray-600 dark:text-gray-300">
+                {responsibility}
+              </li>
+            ))}
+          </ul>
+          <h2 className="text-2xl font-semibold mb-4">Technologies Used</h2>
+          <div className="flex flex-wrap gap-2 mb-8">
+            {technologies.map((tech, index) => (
+              <span
+                key={index}
+                className="bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-full text-sm"
+              >
+                {tech}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
     </WindowPanel>