You need to use the ComponentPreview component, only need to pass the name of the component as a prop.
Using the CodeBlockWrapper component, only need to pass the code as a children, this component wrapper has a prop called size, this prop is used to set the a show more button, the possible values are: "full" and "wrapper"
Here is the code of the component using the CodeBlockWrapper on full size:
"use client" ;
import React from "react" ;
import confetti from "canvas-confetti" ;
const ComponentExample = () => {
const handleClick = () => {
confetti ();
};
return (
< button className = "border rounded-md px-4 py-2" onClick = {handleClick}>
Click me
</ button >
);
};
export default ComponentExample;
Here is the code of the component using the CodeBlockWrapper on wrapper size, only to show large code blocks:
"use client" ;
import React from "react" ;
import confetti from "canvas-confetti" ;
const ComponentExample = () => {
const handleClick = () => {
confetti ();
};
return (
< button className = "border rounded-md px-4 py-2" onClick = {handleClick}>
Click me
</ button >
);
};
export default ComponentExample;
You can show the component code and highlight specific lines, only need to pass the line number on the code block
"use client" ;
import React from "react" ;
import confetti from "canvas-confetti" ;
const ComponentExample = () => {
const handleClick = () => {
confetti ();
};
return (
< button className = "border rounded-md px-4 py-2" onClick = {handleClick}>
Click me
</ button >
);
};
export default ComponentExample;
"use client" ;
import React from "react" ;
import confetti from "canvas-confetti" ;
const ComponentExample = () => {
const handleClick = () => {
confetti ();
};
return (
< button className = "border rounded-md px-4 py-2" onClick = {handleClick}>
Click me
</ button >
);
};
export default ComponentExample;
"use client" ;
import React from "react" ;
import confetti from "canvas-confetti" ;
const ComponentExample = () => {
const handleClick = () => {
confetti ();
};
return (
< button className = "border rounded-md px-4 py-2" onClick = {handleClick}>
Click me
</ button >
);
};
export default ComponentExample ;