Code Block

import { useState } from "react";
import { CodeBlock } from "@/components/ui/code-block-1";

const code = `function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}`;

const codeTs = `function MyComponent(props: Props) {
	return (
	  <div>
		<h1>Hello, {props.name}!</h1>
		<p>Good to see you</p>
	  </div>
	);
}`;

const languages = [
  {
    label: "JavaScript",
    value: "js"
  },
  {
    label: "TypeScript",
    value: "ts"
  },
  {
    label: "Next.js",
    value: "next"
  }
];

export default function LanguageSwitcherDemo() {
  const [language, setLanguage] = useState("js");

  if (language === "ts") {
    return (
      <CodeBlock
        aria-label="Hello world"
        filename="Table.tsx"
        language="tsx"
        switcher={{
          options: languages,
          value: language,
          onChange: (l) => setLanguage(l)
        }}
      >
        {codeTs}
      </CodeBlock>
    );
  }

  if (language === "next") {
    return (
      <CodeBlock
        aria-label="Hello world"
        filename="Table.tsx"
        language="next"
        switcher={{
          options: languages,
          value: language,
          onChange: (l) => setLanguage(l)
        }}
      >
        {codeTs}
      </CodeBlock>
    );
  }

  return (
    <CodeBlock
      aria-label="Hello world"
      filename="Table.jsx"
      language="jsx"
      switcher={{
        options: languages,
        value: language,
        onChange: (l) => setLanguage(l)
      }}
    >
      {code}
    </CodeBlock>
  );
}