Skip to content

Commit a9bc0c9

Browse files
leecalcoteleecalcote
authored
Merge pull request #1108 from FaheemOnHub/add/customCard/learningPath
add: add: Learning Path: Create New Path: colorize background
2 parents b790461 + c09db80 commit a9bc0c9

File tree

2 files changed

+109
-36
lines changed

2 files changed

+109
-36
lines changed

‎src/custom/LearningCard/LearningCard.tsx‎

Lines changed: 84 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { ExternalLinkIcon } from '../../icons';
23
import {
34
Card2,
45
CardActive,
@@ -8,7 +9,8 @@ import {
89
CardLink,
910
CardParent,
1011
CardSubdata,
11-
CardWrapper
12+
CardWrapper,
13+
OwnLearningCard
1214
} from './style';
1315

1416
interface Tutorial {
@@ -28,17 +30,32 @@ interface Props {
2830
path?: string;
2931
courseCount: number;
3032
courseType: string;
33+
cardKey?: string;
3134
}
3235

33-
const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string }>> = ({ path, children }) => {
36+
const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string; isExternal?: boolean }>> = ({
37+
path,
38+
children,
39+
isExternal
40+
}) => {
3441
if (!path) {
3542
return <>{children}</>;
3643
}
3744

38-
return <CardLink href={path}>{children}</CardLink>;
45+
return (
46+
<CardLink
47+
href={path}
48+
target={isExternal ? '_blank' : undefined}
49+
rel={isExternal ? 'noopener noreferrer' : undefined}
50+
>
51+
{children}
52+
</CardLink>
53+
);
3954
};
4055

41-
const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType }) => {
56+
const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType, cardKey }) => {
57+
const isCreateLearningPath = cardKey === 'create-learning-path';
58+
4259
return (
4360
<CardWrapper>
4461
{tutorial.frontmatter.disabled === 'yes' ? (
@@ -65,37 +82,69 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
6582
</CardParent>
6683
</Card2>
6784
) : (
68-
<OptionalLink path={path}>
69-
<CardActive>
70-
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
71-
<div>
72-
<CardHead>
73-
<h3>
74-
{tutorial.frontmatter.title
75-
? tutorial.frontmatter.title
76-
: tutorial.frontmatter.courseTitle}
77-
</h3>
78-
{tutorial.frontmatter.status ? (
79-
<p>
80-
<span>New</span>
81-
</p>
82-
) : null}
83-
</CardHead>
84-
<CardDesc>
85-
<p className="summary">{tutorial.frontmatter.description}</p>
86-
</CardDesc>
87-
<CardSubdata className="card-subdata">
88-
<p>
89-
{courseCount} {courseType}
90-
{courseCount > 1 ? 's' : ''}
91-
</p>
92-
</CardSubdata>
93-
<CardImage>
94-
<img src={tutorial.frontmatter.cardImage} />
95-
</CardImage>
96-
</div>
97-
</CardParent>
98-
</CardActive>
85+
<OptionalLink path={path} isExternal={isCreateLearningPath}>
86+
{isCreateLearningPath ? (
87+
<OwnLearningCard>
88+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
89+
<div>
90+
<CardHead>
91+
<h3>
92+
{tutorial.frontmatter.title
93+
? tutorial.frontmatter.title
94+
: tutorial.frontmatter.courseTitle}
95+
</h3>
96+
{isCreateLearningPath && path && (
97+
<ExternalLinkIcon width="24px" height="24px" />
98+
)}
99+
{tutorial.frontmatter.status ? (
100+
<p>
101+
<span>New</span>
102+
</p>
103+
) : null}
104+
</CardHead>
105+
<CardDesc>
106+
<p className="summary">{tutorial.frontmatter.description}</p>
107+
</CardDesc>
108+
<CardImage>
109+
<img src={tutorial.frontmatter.cardImage} />
110+
</CardImage>
111+
</div>
112+
</CardParent>
113+
</OwnLearningCard>
114+
) : (
115+
<CardActive>
116+
<CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
117+
<div>
118+
<CardHead>
119+
<h3>
120+
{tutorial.frontmatter.title
121+
? tutorial.frontmatter.title
122+
: tutorial.frontmatter.courseTitle}
123+
</h3>
124+
{tutorial.frontmatter.status ? (
125+
<p>
126+
<span>New</span>
127+
</p>
128+
) : null}
129+
</CardHead>
130+
<CardDesc>
131+
<p className="summary">{tutorial.frontmatter.description}</p>
132+
</CardDesc>
133+
{!isCreateLearningPath && (
134+
<CardSubdata className="card-subdata">
135+
<p>
136+
{courseCount} {courseType}
137+
{courseCount > 1 ? 's' : ''}
138+
</p>
139+
</CardSubdata>
140+
)}
141+
<CardImage>
142+
<img src={tutorial.frontmatter.cardImage} />
143+
</CardImage>
144+
</div>
145+
</CardParent>
146+
</CardActive>
147+
)}
99148
</OptionalLink>
100149
)}
101150
</CardWrapper>

‎src/custom/LearningCard/style.tsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,28 @@ const CardActive = styled('div')(({ theme }) => ({
1717
backgroundColor: theme.palette.mode === 'light' ? WHITE : BLACK
1818
}));
1919

20+
const OwnLearningCard = styled('div')(({ theme }) => ({
21+
cursor: 'pointer',
22+
transition: 'all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s',
23+
'&:hover': {
24+
boxShadow: `${theme.palette.background.brand?.default} 0px 0px 19px 6px`
25+
},
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+
`
40+
}));
41+
2042
const CardLink = styled('a')({
2143
color: 'black',
2244
textDecoration: 'none'
@@ -41,6 +63,7 @@ const Card2 = styled('div')(({ theme }) => ({
4163

4264
const CardHead = styled('div')(({ theme }) => ({
4365
display: 'flex',
66+
justifyContent: 'space-between',
4467
padding: '1rem',
4568
'& span': {
4669
border: `1px solid ${theme.palette.primary.dark}`,
@@ -100,5 +123,6 @@ export {
100123
CardLink,
101124
CardParent,
102125
CardSubdata,
103-
CardWrapper
126+
CardWrapper,
127+
OwnLearningCard
104128
};

0 commit comments

Comments
 (0)