javascript

import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme

.confirm-dialog {
  border: none;
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 26rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

<div class="layout" data-controller="viewport">
  <%= turbo_frame_tag "master", class: "master-pane" do %>
    <h1>Products</h1>
    <ul class="product-list">
      <% @products.each do |product| %>
        <li>

class ApplicationController < ActionController::Base
  before_action :authenticate_user!

  rescue_from ActionController::InvalidAuthenticityToken do
    handle_unauthenticated(reason: :csrf)
  end

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["parent", "child"]
  static values = {
    options: Object,

<%= link_to 'Delete', task_path(task),
      data: { controller: 'confirm', action: 'confirm#ask', confirm_message_value: 'Delete this task permanently?', turbo_method: :delete },
      class: 'text-red-700' %>

<%= turbo_frame_tag 'modal' %>

import React, { lazy, Suspense, useState, useEffect } from 'react';

// 1. Component lazy loading
const HeavyComponent = lazy(() => import('./HeavyComponent'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const Dashboard = lazy(() => import('./Dashboard'));

import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';

// 1. useState - managing component state
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

// Basic closure example
function outer() {
  const message = 'Hello from outer';

  function inner() {
    console.log(message); // Accesses outer variable

class ApplicationController < ActionController::Base
  before_action do
    Current.client = request.headers['X-Client']
  end
end

<div data-controller="char-counter" data-char-counter-max-value="280">
  <%= form.text_area :body, rows: 6, data: { char_counter_target: 'input' }, class: 'w-full rounded border p-2' %>
  <div class="mt-1 text-sm text-gray-500">
    <span data-char-counter-target="output"></span> characters remaining
  </div>
</div>