Components
Loading preview...
A clean code block component that shows the formatted text with the line numbers. Credit: https://ui.aceternity.com/components/code-block
@Northstrix
npx shadcn@latest add https://21st.dev/r/maxim.bort.devel/simple-code-blockimport { SimpleCodeBlock } from "@/components/ui/simple-code-block";
const DemoOne = () => {
// Example code
const sampleCode = `"use client"
import React from 'react';
const Links = () => {
const links = {
github: "https://github.com/Northstrix",
vueVersion: "https://namer-ui-for-vue.netlify.app/",
};
function openLink(url: string) {
window.open(url, "_blank");
}
return (
<div style={{ padding: "24px" }}>
<h2>Links</h2>
<button onClick={() => openLink(links.github)}>
GitHub
</button>
<br />
<button onClick={() => openLink(links.vueVersion)}>
Vue version of this component
</button>
</div>
);
};
export default Links;`;
return (
<div style={{
display: "flex",
justifyContent: "center",
width: "100%",
margin: "0 auto",
maxWidth: "576px",
}}>
<SimpleCodeBlock
code={sampleCode}
filename="Links.tsx"
codePadding="16px 16px 16px 52px"
lineNumberXShift="-4px"
filenameColor="var(--simple-code-block-filenamecolor)"
backgroundColor="var(--simple-code-block-backgroundcolor)"
borderColor="var(--simple-code-block-bordercolor)"
borderWidth="1px"
rootBorderRadius="8px"
rootPadding="12px 8px 12px 8px"
lineNumberColor="var(--simple-code-block-linenumbercolor)"
codeTextColor="var(--simple-code-block-codetextcolor)"
fontFamily="'Roboto Mono', monospace"
codeTextSize="0.95rem"
titleFontSize="1.1rem"
codeLineHeight="1.4rem"
hyperlinkUnderlineColor="var(--simple-code-block-hyperlinkunderlinecolor)"
/>
</div>
);
};
export { DemoOne };