Import Component Page

Import Component

This is an example of importing a component into an MDX file.

Name Form Component:

javascriptCopy
"use client";
import type React from "react";
import { useState } from "react";

const NameForm: React.FC = () => {
  const [name, setName] = useState("");
  const [submittedName, setSubmittedName] = useState("");

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    setSubmittedName(name);
  };

  return (
    <div className="p-4 bg-green-100 text-green-800 rounded">
      <form onSubmit={handleSubmit}>
        <label className="block mb-2">
          Enter your name:
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className="ml-2 p-1 border rounded"
          />
        </label>
        <button
          type="submit"
          className="px-2 py-1 bg-green-500 text-white rounded"
        >
          Submit
        </button>
      </form>
      {submittedName && <p className="mt-4">Hello, {submittedName}!</p>}
    </div>
  );
};

export default NameForm;

Usage in a mdx file:

mdxCopy
import NameForm from "../components/name-form";

export const metadata = {
  title: "Import Component Page",
  publishDate: "2024-03-01T00:00:00Z",
};

## Import Component

This is an example of importing a component into an MDX file.

<NameForm />