feat: initial work in message cards

purefunctor · Jun 2, 2024 · 0dcd755 · 0dcd755
1 parent 5c014a4
commit 0dcd755
Show file tree

Hide file tree

Showing 6 changed files with 311 additions and 112 deletions.
diff --git a/lib/frontend/js/pages/InboxPageMessages.re b/lib/frontend/js/pages/InboxPageMessages.re
@@ -1,16 +1,9 @@
-let layoutCss = [%cx
-  {|
-  display: flex;
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-  gap: 2rem;
-  flex-direction: column;
-|}
-];
+open InboxPageMessagesStyles;
 
 [@react.component]
 let make = () => {
-  <div className=layoutCss>
+  <div className=messagesCss>
+    <InboxPageMessagesCard />
     <InboxPageMessagesCard />
     <InboxPageMessagesCard />
   </div>;

diff --git a/lib/frontend/js/pages/InboxPageMessagesCard.re b/lib/frontend/js/pages/InboxPageMessagesCard.re
@@ -1,89 +1,49 @@
-let containerCss = [%cx
-  {|
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 16rem;
-|}
-];
+open InboxPageMessagesStyles;
+open InboxPageMessagesCardHooks;
 
-let cardCss = [%cx
-  {|
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  backface-visibility: hidden;
-  color: $(Theme.background11);
-  font-family: "Poppins";
-  font-size: 4rem;
-  cursor: pointer;
-|}
-];
-
-let backCss = [%cx {|
-  background-color: $(Theme.primary);
-|}];
-
-let faceCss = [%cx {|
-  background-color: $(Theme.secondary);
-|}];
-
-let variants = {
-  "toHidden": {
-    "transform": [|
-      "perspective(1000px) translateY(0px) rotateY(0deg)",
-      "perspective(1000px) translateY(-10x) rotateY(0deg)",
-      "perspective(1000px) translateY(-10px) rotateY(180deg)",
-      "perspective(1000px) translateY(0px) rotateY(180deg)",
-    |],
-    "transition": {
-      "duration": 0.6,
-      "times": [|0.0, 0.16, 0.84, 1.0|],
-    },
-  },
-  "toRevealed": {
-    "transform": [|
-      "perspective(1000px) translateY(0px) rotateY(180deg)",
-      "perspective(1000px) translateY(-10px) rotateY(180deg)",
-      "perspective(1000px) translateY(-10px) rotateY(360deg)",
-      "perspective(1000px) translateY(0px) rotateY(360deg)",
-    |],
-    "transition": {
-      "duration": 0.6,
-      "times": [|0.0, 0.16, 0.84, 1.0|],
-    },
-  },
-  "toDeleted": {
-    "transform": [|"translateY(-50px)"|],
-  },
+module Face = {
+  [@react.component]
+  let make = (~faceInitial, ~faceAnimate, ~toggleReveal) => {
+    let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
+    <FramerMotion.div
+      className=cardFaceCss
+      variants=cardVariants
+      initial=faceInitial
+      animate=faceAnimate>
+      <button className=cardFaceCloseCss onClick>
+        <Icons.CloseLine size="2rem" />
+      </button>
+      <div className=cardFaceContentCss>
+        {React.string("example content :3")}
+      </div>
+      <button className=cardFaceTrashCss>
+        <Icons.DeleteBinLine size="1.2rem" />
+        <span> {React.string("Trash")} </span>
+      </button>
+      <button className=cardFaceReplyCss>
+        <Icons.ChatLine size="1.2rem" />
+        <span> {React.string("Reply")} </span>
+      </button>
+      <button className=cardFaceShareCss>
+        <Icons.LinkM size="1.2rem" />
+        <span> {React.string("Share")} </span>
+      </button>
+    </FramerMotion.div>;
+  };
 };
 
-type state =
-  | Initial
-  | Revealed
-  | Hidden;
-
-let useRevealState = () => {
-  let (state, reduce) =
-    React.useReducer(
-      (state, ()) =>
-        switch (state) {
-        | Initial => Revealed
-        | Revealed => Hidden
-        | Hidden => Revealed
-        },
-      Initial,
-    );
-
-  let toRevealed = Js.Nullable.return("toRevealed");
-  let toHidden = Js.Nullable.return("toHidden");
-  let null = Js.Nullable.null;
-
-  // faceInitial, faceAnimate, backInitial, backAnimate
-  switch (state) {
-  | Initial => (toRevealed, null, toHidden, null, reduce)
-  | Revealed => (null, toRevealed, null, toHidden, reduce)
-  | Hidden => (null, toHidden, null, toRevealed, reduce)
+module Back = {
+  [@react.component]
+  let make = (~backInitial, ~backAnimate, ~toggleReveal) => {
+    let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
+    <FramerMotion.div
+      className=cardBackCss
+      variants=cardVariants
+      initial=backInitial
+      animate=backAnimate
+      onClick>
+      <Icons.MailLockLine size="8rem" />
+    </FramerMotion.div>;
   };
 };
 
@@ -92,22 +52,8 @@ let make = () => {
   let (faceInitial, faceAnimate, backInitial, backAnimate, toggleReveal) =
     useRevealState();
 
-  let onClick = React.useCallback1(_ => toggleReveal(), [|toggleReveal|]);
-
-  <div className=containerCss onClick>
-    <FramerMotion.div
-      className={cardCss ++ " " ++ faceCss}
-      variants
-      initial=faceInitial
-      animate=faceAnimate>
-      {React.string("Face")}
-    </FramerMotion.div>
-    <FramerMotion.div
-      className={cardCss ++ " " ++ backCss}
-      variants
-      initial=backInitial
-      animate=backAnimate>
-      {React.string("Back")}
-    </FramerMotion.div>
+  <div className=cardOuterCss>
+    <Face faceInitial faceAnimate toggleReveal />
+    <Back backInitial backAnimate toggleReveal />
   </div>;
 };
diff --git a/lib/frontend/js/pages/InboxPageMessagesCardHooks.re b/lib/frontend/js/pages/InboxPageMessagesCardHooks.re
@@ -0,0 +1,58 @@
+let cardVariants = {
+  "toHidden": {
+    "transform": [|
+      "translateY(0px) rotateY(0deg)",
+      "translateY(-10px) rotateY(0deg)",
+      "translateY(-10px) rotateY(180deg)",
+      "translateY(0px) rotateY(180deg)",
+    |],
+    "transition": {
+      "duration": 0.6,
+      "times": [|0.0, 0.16, 0.84, 1.0|],
+    },
+  },
+  "toRevealed": {
+    "transform": [|
+      "translateY(0px) rotateY(180deg)",
+      "translateY(-10px) rotateY(180deg)",
+      "translateY(-10px) rotateY(360deg)",
+      "translateY(0px) rotateY(360deg)",
+    |],
+    "transition": {
+      "duration": 0.6,
+      "times": [|0.0, 0.16, 0.84, 1.0|],
+    },
+  },
+  "toDeleted": {
+    "transform": [|"translateY(-50px)"|],
+  },
+};
+
+let toRevealed = Js.Nullable.return("toRevealed");
+let toHidden = Js.Nullable.return("toHidden");
+let null = Js.Nullable.null;
+
+type revealState =
+  | Initial
+  | Revealed
+  | Hidden;
+
+let useRevealState = () => {
+  let (state, reduce) =
+    React.useReducer(
+      (state, ()) =>
+        switch (state) {
+        | Initial => Revealed
+        | Revealed => Hidden
+        | Hidden => Revealed
+        },
+      Initial,
+    );
+
+  // faceInitial, faceAnimate, backInitial, backAnimate
+  switch (state) {
+  | Initial => (toRevealed, null, toHidden, null, reduce)
+  | Revealed => (null, toRevealed, null, toHidden, reduce)
+  | Hidden => (null, toHidden, null, toRevealed, reduce)
+  };
+};