Merge pull request #1115 from FaheemOnHub/add/typeLevel/learningCard

add: Clipboard copy for org_id && add: level and type into learningCard

Author: FaheemOnHub

src/custom/LearningCard/LearningCard.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Typography } from '../../base';
+import { Grid2, Typography } from '../../base';
 import { ExternalLinkIcon } from '../../icons';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
+import { CopyToClipboard } from '../ResourceDetailFormatters/Component';
 import {
   Card2,
   CardActive,
@@ -24,6 +25,8 @@ interface Tutorial {
     description: string;
     status?: boolean;
     cardImage: string;
+    type?: string;
+    level?: string;
   };
 }
 
@@ -129,12 +132,16 @@ const LearningCard: React.FC<Props> = ({
               <CardActive>
                 <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
                   <div>
-                    <CardHead>
-                      <h3>
+                    <CardHead style={{ flexDirection: 'column' }}>
+                      <Typography variant="body1" color="textSecondary">
+                        {tutorial.frontmatter.type}
+                      </Typography>
+                      <h3 style={{ margin: '0.2rem 0.1rem' }}>
                         {tutorial.frontmatter.title
                           ? tutorial.frontmatter.title
                           : tutorial.frontmatter.courseTitle}
                       </h3>
+
                       {tutorial.frontmatter.status ? (
                         <p>
                           <span>New</span>
@@ -150,6 +157,13 @@ const LearningCard: React.FC<Props> = ({
                           {courseCount} {courseType}
                           {courseCount > 1 ? 's' : ''}
                         </p>
+                        <p>
+                          Level:{' '}
+                          {tutorial?.frontmatter?.level
+                            ? tutorial.frontmatter.level.charAt(0).toUpperCase() +
+                              tutorial.frontmatter.level.slice(1)
+                            : ''}
+                        </p>
                       </CardSubdata>
                     )}
                     <CardImage>
@@ -172,9 +186,16 @@ const LearningCard: React.FC<Props> = ({
         <ModalBody>
           <Typography variant="body1">{modalContent}</Typography>
           {orgId && (
-            <Typography variant="body1" color="textSecondary">
-              Your Organization ID: {orgId}
-            </Typography>
+            <Grid2 container direction="row" alignItems="center" spacing={1}>
+              <Grid2>
+                <Typography variant="body1" color="textSecondary">
+                  Your Organization ID: {orgId}
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <CopyToClipboard data={orgId} />
+              </Grid2>
+            </Grid2>
           )}
         </ModalBody>
         <ModalFooter variant="filled">

src/custom/LearningCard/style.tsx

@@ -2,6 +2,7 @@ import { styled } from '@mui/material/styles';
 import { BLACK, ONYX_BLACK, SILVER_GRAY, WHITE } from '../../theme';
 
 const CardWrapper = styled('div')({
+  width: '100%',
   maxWidth: '28rem',
   minWidth: '10rem',
   height: '16rem',
@@ -102,6 +103,8 @@ const CardDesc = styled('div')(({ theme }) => ({
 const CardSubdata = styled('div')(({ theme }) => ({
   padding: '0 1rem',
   position: 'absolute',
+  display: 'flex',
+  gap: '0.4rem',
   bottom: '0rem',
   p: {
     fontSize: '1rem',