🔧 Refactored the DnD grid scaffold a bit

2021-10-02 09:34:54 -07:00
parent 75d5dc4281
commit 0a4c8fab81
8 changed files with 123 additions and 66 deletions
--- a/src/client/components/Cover.tsx
+++ b/src/client/components/Cover.tsx
@@ -0,0 +1,23 @@
+import React, { forwardRef } from "react";
+
+export const Cover = forwardRef(
+  ({ url, index, faded, style, ...props }, ref) => {
+    const inlineStyles = {
+      opacity: faded ? "0.2" : "1",
+      transformOrigin: "0 0",
+      height: index === 0 ? 410 : 200,
+      gridRowStart: index === 0 ? "span 2" : null,
+      gridColumnStart: index === 0 ? "span 2" : null,
+      backgroundImage: `url("${url}")`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundColor: "grey",
+      borderRadius: "10px",
+      ...style,
+    };
+
+    return <div ref={ref} style={inlineStyles} {...props} />;
+  },
+);
+
+Cover.displayName = "Cover";