56b0a45719
- Add ticket selection functionality to event show page using Stimulus - Create ticket_selection_controller.js for handling ticket quantity changes - Update ticket card component and event show view to work with Stimulus - Add comprehensive comments to all JavaScript files for better maintainability - Remove dependent: :destroy from event ticket_types association
44 lines
1.5 KiB
JavaScript
Executable File
44 lines
1.5 KiB
JavaScript
Executable File
import { Controller } from "@hotwired/stimulus"
|
|
import React from "react"
|
|
import { createRoot } from "react-dom/client"
|
|
import { Button } from "@/components/button"
|
|
|
|
// Controller for testing shadcn/ui React components within a Stimulus context
|
|
// Renders a React button component to verify the PostCSS and component setup
|
|
export default class extends Controller {
|
|
// Define targets for the controller
|
|
static targets = ["container"]
|
|
|
|
// Initialize and render the React component when the controller connects
|
|
connect() {
|
|
console.log("Shadcn Button Test Controller connected")
|
|
this.renderButton()
|
|
}
|
|
|
|
// Render the React button component inside the target container
|
|
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>
|
|
)
|
|
}
|
|
|
|
// Handle button click events
|
|
handleClick = () => {
|
|
alert("✅ Le bouton shadcn fonctionne avec PostCSS !")
|
|
console.log("Shadcn button clicked - PostCSS compilation successful")
|
|
}
|
|
} |