42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { useState, useEffect } from "react"
|
|
import { Button } from "./ui/button"
|
|
import { Input } from "./ui/input"
|
|
|
|
interface DynamicComponentProps {
|
|
initialData?: string
|
|
onSubmit?: (data: string) => void
|
|
}
|
|
|
|
export function DynamicComponent({ initialData = "", onSubmit }: DynamicComponentProps) {
|
|
const [data, setData] = useState(initialData)
|
|
|
|
useEffect(() => {
|
|
// You can perform any side effects here
|
|
console.log("Component mounted or data changed:", data)
|
|
}, [data])
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (onSubmit) {
|
|
onSubmit(data)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 border rounded-lg shadow-sm">
|
|
<h2 className="text-lg font-semibold mb-4">Dynamic Component</h2>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<Input type="text" value={data} onChange={(e) => setData(e.target.value)} placeholder="Enter data" />
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
<div className="mt-4">
|
|
<p>Current data: {data}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|