responsive ui

tekdi · Jul 26, 2024 · 0a2ae3c · 0a2ae3c
1 parent 14d043f
commit 0a2ae3c
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 84 deletions.
diff --git a/src/pages/course-planner/foundation.tsx b/src/pages/course-planner/foundation.tsx
@@ -101,7 +101,7 @@ const Foundation = () => {
         ) : (
           <Box>
             <Box
-              sx={{
+              sx={{ 
                 display: "grid",
                 gridTemplateColumns: "1fr 2fr 1fr",
                 gap: isSmallScreen ? "8px" : "16px",
@@ -115,7 +115,7 @@ const Foundation = () => {
             {!selectedCardId ? (
               cardData.map((card) => (
                 <Card
-                  key={card.id}
+                  key={card.id}   
                   sx={{
                     display: "grid",
                     gridTemplateColumns: "1fr 2fr 1fr",

diff --git a/src/pages/stateDetails.tsx b/src/pages/stateDetails.tsx
@@ -4,7 +4,6 @@ import {
   Card,
   Typography,
   Button,
-  CircularProgress,
   IconButton,
   useTheme,
   useMediaQuery,
@@ -38,7 +37,6 @@ const StateDetails = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      // Simulate data fetching
       setTimeout(() => {
         const foundCard = cardData.find((c) => c.id === cardId);
         setCard(foundCard);
@@ -130,94 +128,79 @@ const StateDetails = () => {
         </Box>
       </Box>
       <Box sx={{ marginTop: "16px" }}>
-        {card.boards.map(
-          (
-            board:
-              | string
-              | number
-              | bigint
-              | boolean
-              | React.ReactElement<
-                  any,
-                  string | React.JSXElementConstructor<any>
-                >
-              | Iterable<React.ReactNode>
-              | Promise<React.AwaitedReactNode>
-              | null
-              | undefined,
-            index: React.Key | null | undefined
-          ) => (
-            <Card
-              key={index}
+        {card.boards.map((board: string, index: number) => (
+          <Card
+            key={index}
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "1fr 2fr 1fr",
+              alignItems: "center",
+              cursor: "pointer",
+              border: "1px solid #0000001A",
+              boxShadow: "none",
+              transition: "background-color 0.3s",
+              "&:hover": {
+                backgroundColor: "#EAF2FF",
+              },
+              marginTop: "8px",
+              padding: "16px",
+            }}
+            onClick={() => {
+              if (typeof board === "string") {
+                handleBoardClick(board);
+              }
+            }}
+          >
+            <Box
               sx={{
-                display: "grid",
-                gridTemplateColumns: "1fr 2fr 1fr",
+                display: "flex",
                 alignItems: "center",
-                cursor: "pointer",
-                border: "1px solid #0000001A",
-                boxShadow: "none",
-                transition: "background-color 0.3s",
-                "&:hover": {
-                  backgroundColor: "#EAF2FF",
-                },
-                marginTop: "8px",
-                padding: "16px",
+                gap: "8px",
               }}
-              onClick={() => {
-                if (typeof board === "string") {
-                  handleBoardClick(board);
-                }
+            >
+              <FolderOutlinedIcon />
+              <Typography variant="h6" sx={{ fontSize: "16px" }}>
+                {board}
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "16px",
               }}
             >
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px",
-                }}
-              >
-                <FolderOutlinedIcon />
-                <Typography variant="h6" sx={{ fontSize: "16px" }}>
-                  {board}
-                </Typography>
+              <Box sx={{ width: "40px", height: "40px" }}>
+                <CircularProgressbar
+                  value={(card.boardsUploaded / card.totalBoards) * 100}
+                  strokeWidth={10}
+                  styles={buildStyles({
+                    pathColor: "#06A816",
+                    trailColor: "#E6E6E6",
+                    strokeLinecap: "round",
+                  })}
+                />
               </Box>
-              <Box
-                sx={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "16px",
+              <Typography sx={{ fontSize: "14px" }}>
+                {card.boardsUploaded} / {card.totalBoards}{" "}
+                {t("COURSE_PLANNER.SUBJECTS_UPLOADED")}
+              </Typography>
+            </Box>
+            <Box sx={{ display: "flex", justifyContent: "center" }}>
+              <Button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (typeof board === "string") {
+                    handleCopyLink(board);
+                  }
                 }}
+                sx={{ minWidth: "auto", padding: 0 }}
               >
-                <Box sx={{ width: "40px", height: "40px" }}>
-                  <CircularProgressbar
-                    value={(card.boardsUploaded / card.totalBoards) * 100}
-                    strokeWidth={10}
-                    styles={buildStyles({
-                      pathColor: "#06A816",
-                      trailColor: "#E6E6E6",
-                      strokeLinecap: "round",
-                    })}
-                  />
-                </Box>
-                <Typography sx={{ fontSize: "14px" }}>
-                  {card.boardsUploaded} / {card.totalBoards}{" "}
-                  {t("COURSE_PLANNER.SUBJECTS_UPLOADED")}
-                </Typography>
-              </Box>
-              <Box sx={{ display: "flex", justifyContent: "center" }}>
-                <Button
-                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    handleCopyLink(board as string);
-                  }}
-                  sx={{ minWidth: "auto", padding: 0 }}
-                >
-                  <InsertLinkOutlinedIcon />
-                </Button>
-              </Box>
-            </Card>
-          )
-        )}
+                <InsertLinkOutlinedIcon />
+              </Button>
+            </Box>
+          </Card>
+        ))}{" "}
       </Box>
     </Box>
   );