Files
aperonight/app/javascript/controllers/shadcn_test_controller.js
2025-08-28 15:11:42 +02:00

39 lines
1.2 KiB
JavaScript
Executable File

import { Controller } from "@hotwired/stimulus"
import React from "react"
import { createRoot } from "react-dom/client"
import { Button } from "@/components/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")
}
}