Skip to content

Commit d6958fa

Browse files
LeadcodeDevLeadcodeDev
committed
docs: create card documentation
1 parent dd4bfd2 commit d6958fa

File tree

4 files changed

+119
-11
lines changed

4 files changed

+119
-11
lines changed

‎content/docs/documentation/foundamentals/components/card.mdx‎

Lines changed: 117 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,124 @@ permalink: card
55
icon: lucide:bell
66
---
77

8-
# Card
8+
# Cards
99

10-
:::card-group{cols=4, test="test"}
11-
:::card{label="Test", icon="lucide:bell"}
12-
test
10+
This component allows you to group text elements while providing visual impact.
11+
12+
```
13+
:::card-group
14+
:::card {label="Test", icon="lucide:bell"}
15+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
16+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
17+
:::
18+
:::card {label="Test", icon="lucide:bell"}
19+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
20+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
21+
:::
22+
:::
23+
```
24+
25+
:::card-group {cols=2}
26+
:::card {label="Test", icon="lucide:bell"}
27+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
28+
:::
29+
:::card {label="Test", icon="lucide:bell"}
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
31+
:::
32+
:::
33+
34+
---
35+
36+
## Configuration
37+
38+
### Card per line
39+
40+
You can customize the number of elements per line by setting the `cols` prop.
41+
42+
> [!note]
43+
> Default card per line was fixed to 2
44+
45+
```
46+
:::card-group {cols=4}
47+
:::card {label="Test", icon="lucide:bell"}
48+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
49+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
50+
:::
51+
:::card {label="Test", icon="lucide:bell"}
52+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
53+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
54+
:::
55+
:::
56+
```
57+
58+
:::card-group {cols=4}
59+
:::card {label="Test", icon="lucide:bell"}
60+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
61+
:::
62+
:::card {label="Test", icon="lucide:bell"}
63+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
64+
:::
65+
:::
66+
67+
If the elements cannot be aligned horizontally, they will be moved to the next line.
68+
69+
```
70+
:::card-group {cols=2}
71+
:::card {label="Test", icon="lucide:bell"}
72+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
73+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
74+
:::
75+
:::card {label="Test", icon="lucide:bell"}
76+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
77+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
78+
:::
79+
:::card {label="Test", icon="lucide:bell"}
80+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
81+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
82+
:::
83+
:::
84+
```
85+
86+
:::card-group {cols=2}
87+
:::card {label="Test", icon="lucide:bell"}
88+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
89+
:::
90+
:::card {label="Test", icon="lucide:bell"}
91+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
92+
:::
93+
:::card {label="Test", icon="lucide:bell"}
94+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
95+
:::
96+
:::
97+
98+
### Card item
99+
100+
Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes :
101+
102+
- `label`: Le texte à afficher en haut de la carte. (required)
103+
- `icon`: L'icône à afficher en haut de la carte.
104+
105+
> [!note]
106+
> The cards use the [`iconify`](https://icon-sets.iconify.design/) library to display icons.
107+
108+
```
109+
:::card-group
110+
:::card {label="Test", icon="lucide:bell"}
111+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
112+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
113+
:::
114+
:::card {label="Test", icon="lucide:user"}
115+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
116+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
117+
:::
118+
:::
119+
```
120+
121+
:::card-group {cols=2}
122+
:::card {label="Test", icon="lucide:bell"}
123+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
13124
:::
14-
:::card{label="Test", icon="lucide:bell"}
15-
d
125+
:::card {label="Test", icon="lucide:user"}
126+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16127
:::
17128
:::

‎src/lib/components/content/card-group/card-group.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ const gridCols = {
2020
};
2121
---
2222

23-
<div class:list={["grid gap-5", gridCols[cols ?? 2]]}>
23+
<div class:list={["grid gap-5 pt-5 pb-10", gridCols[cols ?? 2]]}>
2424
<slot />
2525
</div>

‎src/lib/components/content/card-group/card.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ type props = {
77
};
88
99
const props = Astro.props;
10-
console.log("Card", props);
1110
---
1211

1312
<div

‎src/lib/plugins/parser/plugin.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,9 +110,7 @@ export default function rehypeComponents() {
110110
const parsedBlocks = parseSingleNode(node);
111111
const hasBlock = parsedBlocks.some((block) => block.startTag in mdx);
112112

113-
if (hasBlock) {
114-
console.log(JSON.stringify(parsedBlocks, null, 2));
115-
113+
if (parent.type === "root" && hasBlock) {
116114
parent.children[index] = {
117115
type: "element",
118116
tagName: "BlockRenderer",

0 commit comments

Comments
 (0)