70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function CodeSnippet({
|
|
code,
|
|
border = true,
|
|
paddingClass = "pb-20 xl:pb-28 lg:pb-28 md:pb-28",
|
|
}) {
|
|
const [showCode, setShowCode] = useState(false);
|
|
useEffect(() => {
|
|
setShowCode(true);
|
|
}, []);
|
|
|
|
function decodeHtmlEntities(encodedString) {
|
|
if (typeof window != "undefined") {
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(encodedString, "text/html");
|
|
return doc.documentElement.textContent;
|
|
}
|
|
}
|
|
|
|
const randomNumber = Math.floor(Math.random() * 100000) + 1;
|
|
|
|
return (
|
|
<>
|
|
{showCode && (
|
|
<div
|
|
className={
|
|
border
|
|
? "border-b-[rgba(164,174,198,0.2)] border-b border-solid"
|
|
: ""
|
|
}
|
|
>
|
|
<div className={`container ${paddingClass}`}>
|
|
<div className="card">
|
|
<div className="card-footer border-0 !relative">
|
|
<a
|
|
className="collapse-link collapsed stretched-link"
|
|
data-bs-toggle="collapse"
|
|
href={`#collapse-snippet-${randomNumber}`}
|
|
>
|
|
View example's code
|
|
</a>
|
|
</div>
|
|
{/*/.card-footer */}
|
|
<div
|
|
id={`collapse-snippet-${randomNumber}`}
|
|
className="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse"
|
|
>
|
|
<div className="code-wrapper relative !mb-0">
|
|
<div className="code-wrapper-inner">
|
|
<pre className="language-html">
|
|
<code>{decodeHtmlEntities(code)}</code>
|
|
</pre>
|
|
</div>
|
|
{/*/.code-wrapper-inner */}
|
|
</div>
|
|
{/*/.code-wrapper */}
|
|
</div>
|
|
{/*/.card-footer */}
|
|
</div>
|
|
{/*/.card */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|