39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
import React from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
// Connects to data-controller="shadcn-test"
|
|
export default class extends Controller {
|
|
static targets = ["container"]
|
|
|
|
connect() {
|
|
console.log("Shadcn Button Test Controller connected")
|
|
this.renderButton()
|
|
}
|
|
|
|
renderButton() {
|
|
const container = this.containerTarget
|
|
const root = createRoot(container)
|
|
|
|
root.render(
|
|
<div className="flex flex-col items-center gap-4 p-6">
|
|
<h3 className="text-white text-lg font-semibold">Test Button Shadcn</h3>
|
|
<Button
|
|
variant="default"
|
|
size="lg"
|
|
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
|
|
onClick={this.handleClick}
|
|
>
|
|
Cliquez ici - PostCSS Test
|
|
</Button>
|
|
<p className="text-gray-300 text-sm">Ce bouton utilise shadcn/ui + Tailwind + PostCSS</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
handleClick = () => {
|
|
alert("✅ Le bouton shadcn fonctionne avec PostCSS !")
|
|
console.log("Shadcn button clicked - PostCSS compilation successful")
|
|
}
|
|
} |