feat: implement code-preview component

Author: LeadcodeDev

content/docs/documentation/foundamentals/components/_default.mdx

@@ -12,4 +12,5 @@ collection:
   - card
   - callout
   - step
+  - code-preview
 ---

content/docs/documentation/foundamentals/components/callout.mdx

@@ -11,68 +11,99 @@ icon: lucide:tag
 
 ### Info
 
+:::::preview
+::::code-preview
+
 :::callout{variant="info"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
+::::
+::::content-preview
 
 ```
 :::callout{variant="info"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
 ```
 
+::::
+:::::
+
 ---
 
 ### Success
 
+:::::preview
+::::code-preview
+
 :::callout{variant="success"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
+::::
+::::content-preview
 
 ```
 :::callout{variant="success"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
 ```
 
+::::
+:::::
+
 ---
 
 ### Warning
 
+:::::preview
+::::code-preview
+
 :::callout{variant="warning"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
+::::
+::::content-preview
 
 ```
 :::callout{variant="warning"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
 ```
 
+::::
+:::::
+
 ---
 
 ### Danger
 
+:::::preview
+::::code-preview
+
 :::callout{variant="danger"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
+::::
+::::content-preview
 
 ```
 :::callout{variant="danger"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 :::
 ```
 
+::::
+:::::
+
 ---
 
 ## Children
 
-:::callout
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::::preview
+::::code-preview
+
+:::callout{variant="info"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 
 ```rs [main.rs]
 pub fn main() {
@@ -81,16 +112,20 @@ pub fn main() {
 ```
 
 :::
+::::
+::::content-preview
 
 ````
-:::callout
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::callout{variant="info"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
 
 ```rs [main.rs]
 pub fn main() {
     println!("Hello, world!");
 }
 ```
-
 :::
 ````
+
+::::
+:::::

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

@@ -9,6 +9,22 @@ icon: lucide:grid-2x2
 
 This component allows you to group text elements while providing visual impact.
 
+::::::preview
+
+:::::code-preview
+
+::::card-group{cols=2}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+::::
+:::::
+
+:::::content-preview
+
 ```
 ::::card-group
   :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
@@ -23,14 +39,9 @@ This component allows you to group text elements while providing visual impact.
 ::::
 ```
 
-::::card-group{cols=2}
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-::::
+:::::
+
+::::::
 
 ---
 
@@ -43,8 +54,27 @@ You can customize the number of elements per line by setting the `cols` prop.
 > [!note]
 > Default card per line was fixed to 2
 
+::::::preview
+
+:::::code-preview
+
+::::card-group{cols=3}
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+::::
+
+:::::
+
+:::::content-preview
+
 ```
-::::card-group{cols=4}
+::::card-group{cols=3}
   :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -56,16 +86,34 @@ You can customize the number of elements per line by setting the `cols` prop.
 ::::
 ```
 
-::::card-group{cols=4}
+:::::
+
+::::::
+
+If the elements cannot be aligned horizontally, they will be moved to the next line.
+
+::::::preview
+
+:::::code-preview
+
+::::card-group{cols=2}
 :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
 :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 :::
 ::::
 
-If the elements cannot be aligned horizontally, they will be moved to the next line.
+:::::
+
+:::::content-preview
 
 ```
 ::::card-group{cols=2}
@@ -84,17 +132,9 @@ If the elements cannot be aligned horizontally, they will be moved to the next l
 ::::
 ```
 
-::::card-group{cols=2}
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-::::
+:::::
+
+::::::
 
 ### Card item
 
@@ -106,6 +146,25 @@ Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes
 > [!note]
 > The cards use the [`iconify`](https://icon-sets.iconify.design/) library to display icons.
 
+::::::preview
+
+:::::code-preview
+
+::::card-group
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+:::card{label="Lorem ipsum dolor sit amet" icon="lucide:user"}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+:::
+::::
+
+:::::
+
+:::::content-preview
+
 ```
 ::::card-group
   :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
@@ -119,11 +178,6 @@ Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes
 ::::
 ```
 
-::::card-group{cols=2}
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-:::card{label="Lorem ipsum dolor sit amet" icon="lucide:user"}
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-:::
-::::
+:::::
+
+::::::