Skip to content

Commit 7110a21

Browse files
ajay-dhangarajay-dhangar
committed
new upadate for cards
1 parent 95e416a commit 7110a21

File tree

3 files changed

+122
-166
lines changed

3 files changed

+122
-166
lines changed

‎src/components/DocsCard/index.tsx‎

Lines changed: 68 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import Link from '@docusaurus/Link';
4-
import useBaseUrl from '@docusaurus/useBaseUrl';
1+
import React from "react";
2+
import clsx from "clsx";
3+
import Link from "@docusaurus/Link";
4+
import useBaseUrl from "@docusaurus/useBaseUrl";
55

6-
import styles from './styles.module.css';
6+
import styles from "./styles.module.css";
7+
8+
declare global {
9+
namespace JSX {
10+
interface IntrinsicElements {
11+
"ion-icon": React.DetailedHTMLProps<
12+
React.HTMLAttributes<HTMLElement> & { name?: string },
13+
HTMLElement
14+
>;
15+
}
16+
}
17+
}
718

819
interface Props extends React.HTMLAttributes<HTMLDivElement> {
920
href?: string;
@@ -13,82 +24,88 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
1324
iconset?: string;
1425
ionicon?: string;
1526
img?: string;
16-
size?: 'md' | 'lg';
27+
size?: "md" | "lg";
28+
activeIndex?: number;
1729
}
1830

1931
function DocsCard(props: Props): JSX.Element {
20-
const isStatic = typeof props.href === 'undefined';
21-
const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false;
22-
const header = props.header === 'undefined' ? null : <header className="Card-header">{props.header}</header>;
32+
const isStatic = typeof props.href === "undefined";
33+
const isOutbound =
34+
typeof props.href !== "undefined" ? /^http/.test(props.href) : false;
35+
// const header =
36+
// props.header === "undefined" ? null : (
37+
// <header>{props.header}</header>
38+
// );
2339
const hoverIcon = props.hoverIcon || props.icon;
2440

2541
const content = (
2642
<>
27-
{props.img && <img src={useBaseUrl(props.img)} className="Card-image" />}
28-
<div className="Card-container">
29-
{(props.icon || hoverIcon) && (
30-
<div className="Card-icon-row">
31-
{/* {props.icon && <img src={useBaseUrl(props.icon)} className="Card-icon Card-icon-default" />} */}
32-
{hoverIcon && <img src={useBaseUrl(hoverIcon)} className="Card-icon Card-icon-hover" />}
33-
</div>
34-
)}
35-
{props.ionicon && <ion-icon name={props.ionicon} className="Card-ionicon"></ion-icon>}
36-
{props.iconset && (
37-
<div className="Card-iconset__container">
38-
{props.iconset.split(',').map((icon, index) => (
39-
<img
40-
src={useBaseUrl(icon)}
41-
className={`Card-icon ${index === props.activeIndex ? 'Card-icon-active' : ''}`}
42-
data-index={index}
43-
key={index}
44-
/>
45-
))}
46-
</div>
47-
)}
48-
<h3>
49-
{props.header && header}
50-
</h3>
51-
<div className="Card-content">
52-
<p>
53-
{props.children}
54-
</p>
43+
{props.img && <img src={useBaseUrl(props.img)} />}
44+
{/* FLEX HEADER (ICON + TITLE) */}
45+
{(props.icon || props.ionicon || hoverIcon) && (
46+
<div className={styles.cardHeaderRow}>
47+
{hoverIcon && (
48+
<img
49+
src={useBaseUrl(hoverIcon)}
50+
className={styles.cardIcon}
51+
alt=""
52+
/>
53+
)}
54+
55+
{props.ionicon && (
56+
<ion-icon
57+
name={props.ionicon}
58+
className={styles.cardIonicon}
59+
></ion-icon>
60+
)}
61+
62+
{props.header && (
63+
<h3 className={styles.cardHeader}>{props.header}</h3>
64+
)}
5565
</div>
66+
)}
67+
<div>
68+
<p>{props.children}</p>
5669
</div>
5770
</>
5871
);
5972

6073
const className = clsx({
61-
'Card-with-image': typeof props.img !== 'undefined',
62-
'Card-without-image': typeof props.img === 'undefined',
63-
'Card-size-lg': props.size === 'lg',
64-
[props.className]: props.className,
74+
"Card-with-image": typeof props.img !== "undefined",
75+
"Card-without-image": typeof props.img === "undefined",
76+
"Card-size-lg": props.size === "lg",
77+
...(props.className ? { [props.className]: true } : {}),
6578
});
6679

6780
if (isStatic) {
6881
return (
69-
<docs-card class={className}>
70-
<div className={clsx(styles.card, 'docs-card')}>{content}</div>
71-
</docs-card>
82+
<div className={className}>
83+
<div className={clsx(styles.card, "docs-card")}>{content}</div>
84+
</div>
7285
);
7386
}
7487

7588
if (isOutbound) {
7689
return (
77-
<docs-card class={className}>
78-
<a className={clsx(styles.card, 'docs-card')} href={props.href} target="_blank">
90+
<div className={className}>
91+
<a
92+
className={clsx(styles.card, "docs-card")}
93+
href={props.href}
94+
target="_blank"
95+
>
7996
{content}
8097
</a>
81-
</docs-card>
98+
</div>
8299
);
83100
}
84101

85102
return (
86-
<docs-card class={className}>
87-
<Link to={props.href} className={clsx(styles.card, 'docs-card')}>
103+
<div className={className}>
104+
<Link to={props.href} className={clsx(styles.card, "docs-card")}>
88105
{content}
89106
</Link>
90-
</docs-card>
107+
</div>
91108
);
92109
}
93110

94-
export default DocsCard;
111+
export default DocsCard;

‎src/components/DocsCard/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
2+
.imageWrapper {
3+
width: 100%;
4+
height: 160px;
5+
overflow: hidden;
6+
background: var(--ifm-color-emphasis-100);
7+
}
8+
9+
.imageWrapper img {
10+
width: 100%;
11+
height: 100%;
12+
object-fit: cover;
13+
transition: transform 0.5s ease;
14+
}
15+
16+
.card:hover .imageWrapper img {
17+
transform: scale(1.05);
18+
}
19+
20+
.headerRow {
21+
display: flex;
22+
align-items: center;
23+
gap: 0.75rem;
24+
margin-bottom: 0.75rem;
25+
}
26+
27+
.icon {
28+
width: 32px;
29+
height: 32px;
30+
}
31+
32+
.title {
33+
margin: 0;
34+
font-size: 1.25rem;
35+
font-weight: 700;
36+
line-height: 1.2;
37+
}

‎src/components/DocsCard/styles.module.css‎

Lines changed: 17 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,6 @@ docs-card[disabled]::after {
5858
box-shadow: var(--docs-card-shadow);
5959
text-decoration: none;
6060
}
61-
62-
.card[href]:hover .Card-icon-hover {
63-
opacity: 1;
64-
}
6561
}
6662

6763
.card:hover,
@@ -70,123 +66,29 @@ docs-card[disabled]::after {
7066
color: inherit;
7167
}
7268

73-
.Card-with-image {
74-
grid-row: span 2;
75-
}
76-
77-
.Card-without-image {
78-
font-size: 12px;
79-
}
80-
81-
.Card-container {
82-
padding: 1.5rem;
83-
}
84-
85-
.Card-image {
86-
width: 100%;
87-
height: auto;
69+
/* FLEX HEADER ROW */
70+
.cardHeaderRow {
71+
display: flex;
72+
align-items: center;
73+
gap: 1rem;
74+
margin-top: 0.5rem;
75+
margin-bottom: 1rem;
8876
}
8977

90-
.Card-icon,
91-
.Card-iconset__container {
92-
width: 48px;
93-
height: 48px;
94-
margin-bottom: 1.2em;
95-
border-radius: 50%;
78+
/* Icons */
79+
.cardIcon {
80+
width: 35px;
81+
height: 35px;
9682
object-fit: contain;
9783
}
9884

99-
.Card-icon-default {
100-
transition: opacity 150ms ease-out;
101-
}
102-
103-
.Card-icon-hover {
104-
top: 0;
105-
position: absolute;
106-
opacity: 0;
107-
transition: opacity 150ms ease-out;
108-
}
109-
110-
.Card-icon-row {
111-
position: relative;
112-
}
113-
114-
.Card-iconset__container {
115-
position: relative;
116-
}
117-
118-
.Card-iconset__container .Card-icon {
119-
position: absolute;
120-
opacity: 0;
121-
transition: 0.8s opacity;
85+
.cardIonicon {
86+
font-size: 35px;
12287
}
12388

124-
.Card-iconset__container .Card-icon--active {
125-
opacity: 1;
126-
}
127-
128-
.Card-ionicon {
129-
width: 48px;
130-
height: 48px;
131-
float: left;
132-
margin-right: 1em;
133-
}
134-
135-
.Card-content > *:first-child {
136-
margin-top: 0;
137-
}
138-
139-
.Card-content > *:last-child {
140-
margin-bottom: 0;
141-
}
142-
143-
.Card-header {
144-
font-size: 1rem;
145-
line-height: 1.4;
146-
margin-bottom: 0.45em;
89+
/* Title */
90+
.cardHeader {
91+
font-size: 1.3rem;
14792
font-weight: 600;
148-
color: var(--token-heading-color-dark);
149-
}
150-
151-
.Card-without-image .Card-header {
152-
margin-bottom: 0.3em;
153-
}
154-
155-
.Card-header > svg {
156-
fill: currentColor;
157-
height: 1em;
158-
margin-bottom: -0.125em;
159-
width: auto;
160-
}
161-
162-
.Card-size-lg .Card-icon,
163-
.Card-size-lg .Card-ionicon,
164-
.Card-size-lg .Card-iconset__container {
165-
width: 80px;
166-
height: 80px;
167-
}
168-
169-
.Card-size-lg.Card-without-image .Card-header {
170-
font-size: 20px;
171-
}
172-
173-
aside .Card-container {
174-
display: grid;
175-
grid-template-columns: minmax(0, max-content) 1fr;
176-
grid-template-rows: minmax(0, min-content);
177-
grid-template-areas:
178-
'icon title'
179-
'icon body';
180-
}
181-
182-
aside .Card-icon {
183-
width: 32px;
184-
height: 32px;
185-
margin-right: 16px;
186-
margin-bottom: 0;
187-
grid-area: icon;
188-
}
189-
190-
aside .Card-header {
191-
grid-area: title;
93+
margin: 0;
19294
}

0 commit comments

Comments
 (0)