Skip to content

Commit 7e96fe9

Browse files
FaheemOnHubFaheemOnHub
authored
Merge pull request #1111 from FaheemOnHub/add/modal/learningCard
add modal for learningCard && fix learningCard design.
2 parents a43723e + 3e62fe0 commit 7e96fe9

2 files changed

Lines changed: 105 additions & 51 deletions

File tree

‎src/custom/LearningCard/LearningCard.tsx‎

Lines changed: 83 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
2+
import { Typography } from '../../base';
23
import { ExternalLinkIcon } from '../../icons';
4+
import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
35
import {
46
Card2,
57
CardActive,
@@ -30,6 +32,8 @@ interface Props {
3032
path?: string;
3133
courseCount: number;
3234
courseType: string;
35+
orgId?: string;
36+
modalContent?: string;
3337
}
3438

3539
const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal?: boolean }>> = ({
@@ -52,8 +56,19 @@ const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal
5256
);
5357
};
5458

55-
const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType }) => {
59+
const LearningCard: React.FC<Props> = ({
60+
tutorial,
61+
path,
62+
courseCount,
63+
courseType,
64+
orgId,
65+
modalContent
66+
}) => {
5667
const isCreateLearningPath = courseType === 'learning-card';
68+
const [modalOpen, setModalOpen] = useState(false);
69+
70+
const handleModalOpen = () => setModalOpen(true);
71+
const handleModalClose = () => setModalOpen(false);
5772
return (
5873
<CardWrapper>
5974
{tutorial.frontmatter.disabled === 'yes' ? (
@@ -80,9 +95,9 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
8095
</CardParent>
8196
</Card2>
8297
) : (
83-
<OptionalLink path={path} isExternal={isCreateLearningPath}>
98+
<>
8499
{isCreateLearningPath ? (
85-
<OwnLearningCard>
100+
<OwnLearningCard onClick={handleModalOpen} style={{ cursor: 'pointer' }}>
86101
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
87102
<div>
88103
<CardHead>
@@ -110,41 +125,72 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
110125
</CardParent>
111126
</OwnLearningCard>
112127
) : (
113-
<CardActive>
114-
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
115-
<div>
116-
<CardHead>
117-
<h3>
118-
{tutorial.frontmatter.title
119-
? tutorial.frontmatter.title
120-
: tutorial.frontmatter.courseTitle}
121-
</h3>
122-
{tutorial.frontmatter.status ? (
123-
<p>
124-
<span>New</span>
125-
</p>
126-
) : null}
127-
</CardHead>
128-
<CardDesc>
129-
<p className="summary">{tutorial.frontmatter.description}</p>
130-
</CardDesc>
131-
{!isCreateLearningPath && (
132-
<CardSubdata className="card-subdata">
133-
<p>
134-
{courseCount} {courseType}
135-
{courseCount > 1 ? 's' : ''}
136-
</p>
137-
</CardSubdata>
138-
)}
139-
<CardImage>
140-
<img src={tutorial.frontmatter.cardImage} />
141-
</CardImage>
142-
</div>
143-
</CardParent>
144-
</CardActive>
128+
<OptionalLink path={path} isExternal={isCreateLearningPath}>
129+
<CardActive>
130+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
131+
<div>
132+
<CardHead>
133+
<h3>
134+
{tutorial.frontmatter.title
135+
? tutorial.frontmatter.title
136+
: tutorial.frontmatter.courseTitle}
137+
</h3>
138+
{tutorial.frontmatter.status ? (
139+
<p>
140+
<span>New</span>
141+
</p>
142+
) : null}
143+
</CardHead>
144+
<CardDesc>
145+
<p className="summary">{tutorial.frontmatter.description}</p>
146+
</CardDesc>
147+
{!isCreateLearningPath && (
148+
<CardSubdata className="card-subdata">
149+
<p>
150+
{courseCount} {courseType}
151+
{courseCount > 1 ? 's' : ''}
152+
</p>
153+
</CardSubdata>
154+
)}
155+
<CardImage>
156+
<img src={tutorial.frontmatter.cardImage} />
157+
</CardImage>
158+
</div>
159+
</CardParent>
160+
</CardActive>
161+
</OptionalLink>
145162
)}
146-
</OptionalLink>
163+
</>
147164
)}
165+
166+
<Modal
167+
open={modalOpen}
168+
closeModal={handleModalClose}
169+
title={tutorial.frontmatter.title || tutorial.frontmatter.courseTitle}
170+
maxWidth="sm"
171+
>
172+
<ModalBody>
173+
<Typography variant="body1">{modalContent}</Typography>
174+
{orgId && (
175+
<Typography variant="body1" color="textSecondary">
176+
Your Organization ID: {orgId}
177+
</Typography>
178+
)}
179+
</ModalBody>
180+
<ModalFooter variant="filled">
181+
<ModalButtonSecondary onClick={handleModalClose}>Close</ModalButtonSecondary>
182+
{path && (
183+
<ModalButtonPrimary
184+
onClick={() => {
185+
window.open(path, '_blank');
186+
handleModalClose();
187+
}}
188+
>
189+
Visit Docs
190+
</ModalButtonPrimary>
191+
)}
192+
</ModalFooter>
193+
</Modal>
148194
</CardWrapper>
149195
);
150196
};

‎src/custom/LearningCard/style.tsx‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,31 @@ const CardActive = styled('div')(({ theme }) => ({
2020
const OwnLearningCard = styled('div')(({ theme }) => ({
2121
cursor: 'pointer',
2222
transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
23+
position: 'relative',
24+
overflow: 'hidden',
2325
'&:hover': {
2426
boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
2527
},
26-
background: `
27-
repeating-linear-gradient(
28-
45deg,
29-
transparent,
30-
transparent 10px,
31-
#ccc 10px,
32-
#ccc 20px
33-
),
34-
linear-gradient(
35-
to bottom,
36-
#eee,
37-
#999
38-
)
39-
`
28+
background: `linear-gradient(135deg,
29+
rgba(255, 255, 255, 0.85) 0%,
30+
rgba(248, 250, 252, 0.9) 50%,
31+
rgba(241, 245, 249, 0.85) 100%)`,
32+
'&::before': {
33+
content: '""',
34+
position: 'absolute',
35+
top: 0,
36+
left: 0,
37+
right: 0,
38+
bottom: 0,
39+
background: `repeating-linear-gradient(
40+
45deg,
41+
transparent,
42+
transparent 15px,
43+
rgba(148, 163, 184, 0.1) 15px,
44+
rgba(148, 163, 184, 0.1) 30px
45+
)`,
46+
pointerEvents: 'none'
47+
}
4048
}));
4149

4250
const CardLink = styled('a')({

0 commit comments

Comments
 (0)