feat: governance action card

IntersectMBO · Jan 24, 2025 · 0a1d570 · 0a1d570
1 parent b4f084b
commit 0a1d570
Show file tree

Hide file tree

Showing 8 changed files with 337 additions and 173 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,5 +1,5 @@
 import { Box, Grid } from "@mui/material";
-import GovernanceActionCard from "./Components/GovernanceActionCard";
+import GovernanceActionCard from "./Components/Molecules/GovernanceActionCard";
 import { IconArrowCircleRight } from "@intersect.mbo/intersectmbo.org-icons-set";
 import "./index.scss";
 
@@ -15,15 +15,12 @@ function App({ description }: AppProps) {
         height: "100%",
       }}
     >
-      <Box 
-      sx={{
-        padding: 2,
-        maxWidth: '1200px',
-        margin: '0 auto', // Center the content
-      }}
-    >
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6} md={4}>
+      <Grid
+        container
+        spacing={{ xs: 4, sm: 4, lg: 8 }}
+        justifyContent={"center"} 
+      >
+        <Grid item xs={12} sm={12} lg={4}>
           <GovernanceActionCard
             dateSubmitted="18 Jan 2024"
             epoch={430}
@@ -37,7 +34,7 @@ function App({ description }: AppProps) {
             statusEpoch={440}
           />
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid item xs={12} sm={12} lg={4}>
           <GovernanceActionCard
             dateSubmitted="18 Jan 2024"
             epoch={430}
@@ -51,7 +48,7 @@ function App({ description }: AppProps) {
             statusEpoch={440}
           />
         </Grid>
-        <Grid item xs={12} sm={6} md={4}>
+        <Grid item xs={12} sm={12} lg={4}>
           <GovernanceActionCard
             dateSubmitted="18 Jan 2024"
             epoch={430}
@@ -66,7 +63,6 @@ function App({ description }: AppProps) {
           />
         </Grid>
       </Grid>
-    </Box>
     </div>
   );
 }

diff --git a/ui/src/Assets/Icons/CopyIcon.tsx b/ui/src/Assets/Icons/CopyIcon.tsx
@@ -0,0 +1,40 @@
+type CopyIconProps = {
+  width?: number;
+  height?: number;
+};
+
+export default function CopyIcon({ width, height }: CopyIconProps) {
+  return (
+    <>
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_478_5089)">
+          <path
+            d="M16.6667 7.5H9.16667C8.24619 7.5 7.5 8.24619 7.5 9.16667V16.6667C7.5 17.5871 8.24619 18.3333 9.16667 18.3333H16.6667C17.5871 18.3333 18.3333 17.5871 18.3333 16.6667V9.16667C18.3333 8.24619 17.5871 7.5 16.6667 7.5Z"
+            stroke="#0033AD"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M4.16663 12.4998H3.33329C2.89127 12.4998 2.46734 12.3242 2.15478 12.0117C1.84222 11.6991 1.66663 11.2752 1.66663 10.8332V3.33317C1.66663 2.89114 1.84222 2.46722 2.15478 2.15466C2.46734 1.8421 2.89127 1.6665 3.33329 1.6665H10.8333C11.2753 1.6665 11.6992 1.8421 12.0118 2.15466C12.3244 2.46722 12.5 2.89114 12.5 3.33317V4.1665"
+            stroke="#0033AD"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_478_5089">
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </>
+  );
+}
diff --git a/ui/src/Components/GovernanceActionCard/index.tsx b/ui/src/Components/GovernanceActionCard/index.tsx
diff --git a/ui/src/Components/Molecules/GovernanceActionCard.tsx b/ui/src/Components/Molecules/GovernanceActionCard.tsx
@@ -0,0 +1,107 @@
+import { Box, Button, Card, CardContent, Typography } from "@mui/material";
+import GovernanceActionCardHeader from "./GovernanceActionCardHeader";
+import GovernanceActionCardElement from "./GovernanceActionCardElement";
+import GovernanceActionCardIDElement from "./GovernanceActionCardIDElement";
+
+interface GovernanceActionCardProps {
+  dateSubmitted: string;
+  epoch: number;
+  status: string;
+  title: string;
+  abstract: string;
+  governanceActionType: string;
+  governanceActionID: string;
+  cipGovernanceActionID: string;
+  statusDate: string;
+  statusEpoch: Number;
+}
+
+function GovernanceActionCard({
+  dateSubmitted,
+  epoch,
+  status,
+  title,
+  abstract,
+  governanceActionType,
+  governanceActionID,
+  cipGovernanceActionID,
+  statusDate,
+  statusEpoch,
+}: GovernanceActionCardProps) {
+  return (
+    <Card
+      sx={{
+        width: "100%",
+        backgroundColor: "transparent",
+        padding: 2,
+        borderRadius: "20px",
+      }}
+    >
+      <CardContent>
+        <GovernanceActionCardHeader
+          dateSubmitted={dateSubmitted}
+          epochSubmitted={epoch}
+          status={status}
+          title={title}
+        />
+        <Box sx={{ marginTop: 2 }}>
+          <GovernanceActionCardElement
+            title="Abstract"
+            description={abstract}
+          />
+        </Box>
+        <Box sx={{ marginTop: 2 }}>
+          <GovernanceActionCardElement
+            title=" Governance Action Type"
+            description={governanceActionType}
+          />
+        </Box>
+        <Box sx={{ marginTop: 2 }}>
+          <GovernanceActionCardIDElement
+            title="Governance Action ID"
+            id={governanceActionID}
+          />
+        </Box>
+        <Box sx={{ marginTop: 2 }}>
+          <GovernanceActionCardIDElement title="(CIP-129)Governance Action ID" id={cipGovernanceActionID}/>
+        </Box>
+        <Box display="flex" justifyContent="center" marginTop={3}>
+          <Typography
+            sx={{
+              fontSize: "14px",
+              color: status === "Expired" ? "#900B09" : "#29984E",
+            }}
+          >
+            {status}:{" "}
+            <Typography
+              sx={{
+                fontSize: "14px",
+                fontWeight: "bold",
+                color: status === "Expired" ? "#900B09" : "#29984E",
+              }}
+              component="span"
+            >
+              {statusDate}
+            </Typography>{" "}
+            {`(Epoch ${statusEpoch})`}
+          </Typography>
+        </Box>
+        <Box display="flex" justifyContent="center" marginTop={3}>
+          <Button
+            variant="contained"
+            sx={{
+              borderRadius: "50px",
+              color: "#FFF",
+              backgroundColor: "#0033AD",
+              width: "100%",
+            }}
+          >
+            View Details
+          </Button>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default GovernanceActionCard;