Add colour

patrickbower · Oct 25, 2024 · 7a210be · 7a210be
1 parent 0531879
commit 7a210be
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 19 deletions.
diff --git a/src/App.js b/src/App.js
@@ -40,11 +40,15 @@ function App() {
   }
 
   return (
-    <div className="bg-neutral-700 w-screen h-screen">
-      <div className="fixed inset-y-0 left-[calc(50%-100px)] w-px bg-white"></div>
-      <div className="fixed inset-y-0 left-[calc(50%+100px)] w-px bg-white"></div>
-      {data && <Rail data={data} halfScreenWidth={halfScreenWidth} />}
-      <div className="fixed inset-y-0 left-1/2 transform -translate-x-1/2 w-px bg-red-500"></div>
+    <div className="relative">
+      <div className="bg-neutral-700 w-screen h-screen">
+        <div className="fixed inset-y-0 left-[calc(50%-100px)] w-px bg-white opacity-10"></div>
+        <div className="fixed inset-y-0 left-[calc(50%+100px)] w-px bg-white opacity-10"></div>
+        <div className="fixed inset-y-0 left-1/2 transform -translate-x-1/2 w-px bg-red-500"></div>
+        {data && <Rail data={data} halfScreenWidth={halfScreenWidth} />}
+      </div>
+      <div class="bg-gradient-to-r from-neutral-700 to-transparent h-screen w-24 absolute left-0 top-0"></div>
+      <div class="bg-gradient-to-l from-neutral-700 to-transparent h-screen w-24 absolute right-0 top-0"></div>
       <Info />
     </div>
   );

diff --git a/src/components/Rail.jsx b/src/components/Rail.jsx
@@ -1,4 +1,5 @@
-import Track from "./Track";
+import TrackA from "./TrackA";
+import TrackB from "./TrackB";
 
 function Rail({ data, halfScreenWidth }) {
   let deckA = {};
@@ -24,12 +25,12 @@ function Rail({ data, halfScreenWidth }) {
     >
       <div className="flex flex-row gap-[214px]">
         {Object.entries(deckA).map(([key, value]) => (
-          <Track key={key} index={key} value={value} deck="A" />
+          <TrackA key={key} index={key} value={value} />
         ))}
       </div>
       <div className="flex flex-row gap-[214px] pl-[356px]">
         {Object.entries(deckB).map(([key, value]) => (
-          <Track key={key} index={key} value={value} deck="B" />
+          <TrackB key={key} index={key} value={value} />
         ))}
         <div
           className="flex-none"

diff --git a/src/components/TrackA.jsx b/src/components/TrackA.jsx
@@ -0,0 +1,38 @@
+function Rail({ value, index }) {
+  const trackIndex = Number(index) + 1;
+
+  return (
+    <div className="bg-zinc-600 bg-opacity-50 backdrop-blur-md px-10 py-8 flex-none w-[500px] snap-center rounded-lg">
+      <div className="flex justify-between gap-9 items-center bg-opacity-100 text-white">
+        <span className="text-4xl font-bold w-16 flex-shrink-0 text-center relative">
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-20 uppercase -top-5">
+            IN
+          </span>
+          {value.in}
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light text-blue-500 uppercase -bottom-5">
+            {value.mix_in}
+          </span>
+        </span>
+        <div className="flex-grow">
+          <p className="w-[220px] font-semibold uppercase overflow-hidden whitespace-nowrap truncate">
+            {trackIndex}. {value.track}
+          </p>
+          <p className="w-[220px] text-sm font-light overflow-hidden whitespace-nowrap truncate">
+            {value.artist}
+          </p>
+        </div>
+        <span className="text-4xl font-bold w-16 flex-shrink-0 text-center relative">
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-20 uppercase -top-5">
+            OUT
+          </span>
+          {value.out}
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light text-blue-500 uppercase -bottom-5">
+            {value.mix_out}
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default Rail;
diff --git a/src/components/Track.jsx → src/components/TrackB.jsx b/src/components/Track.jsx → src/components/TrackB.jsx
@@ -5,14 +5,13 @@ function Rail({ value, index, deck }) {
     <div className="bg-zinc-600 bg-opacity-50 backdrop-blur-md px-10 py-8 flex-none w-[500px] snap-center rounded-lg">
       <div className="flex justify-between gap-9 items-center bg-opacity-100 text-white">
         <span className="text-4xl font-bold w-16 flex-shrink-0 text-center relative">
-          {value.in}
-          <span
-            className={`w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-50 uppercase ${
-              deck === "B" ? "-top-5" : "-bottom-5"
-            }`}
-          >
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light text-blue-500 uppercase -top-5 blue-line">
             {value.mix_in}
           </span>
+          {value.in}
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-20 uppercase -bottom-5">
+            IN
+          </span>
         </span>
         <div className="flex-grow">
           <p className="w-[220px] font-semibold uppercase overflow-hidden whitespace-nowrap truncate">
@@ -23,12 +22,11 @@ function Rail({ value, index, deck }) {
           </p>
         </div>
         <span className="text-4xl font-bold w-16 flex-shrink-0 text-center relative">
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-20 uppercase -bottom-5">
+            OUT
+          </span>
           {value.out}
-          <span
-            className={`w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light opacity-50 uppercase ${
-              deck === "B" ? "-top-5" : "-bottom-5"
-            }`}
-          >
+          <span className="w-24 absolute left-1/2 transform -translate-x-1/2 text-xs font-light text-blue-500 uppercase -top-5 blue-line">
             {value.mix_out}
           </span>
         </span>

diff --git a/src/index.css b/src/index.css
@@ -18,3 +18,13 @@
     opacity: 1;
   }
 }
+
+.blue-line:after {
+  content: "";
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  width: 1px;
+  height: 25px;
+  background: rgb(59 130 246);
+}