Vladimir Saponko carellen

toggle_component.html.slim

.flex.justify-center.items-center
  .bg-opacity-60.rounded-full-full.overflow-hidden.w-32.text-center.relative.pr-16
    span.absolute.flex.top-0.bottom-0.right-0.w-16.items-center.justify-center.z-1.pointer-events-none
      = @off
    input.cursor-pointer.absolute.w-full.h-full.opacity-0.top-0.bottom-0.left-0.peer type="checkbox" data-action="change->#{@listener}"
    label.relative.block.pointer-events-none.select-none{
    class="py-0.5 peer-checked:before:translate-x-16 before:transition-transform before:bg-white before:h-full before:w-full before:absolute before:top-0 before:left-0 before:rounded-full before:translate-x-0"}
 span.relative = @on

Template

= turbo_stream_from :something, data: { check_target: 'cable'}

Stimulus controller

export default class extends Controller {
  static targets = ["cable"];

This is quick implementation of virtual scroll using existing DOM-structure.

index.html.slim

.bg-white role="table" data-controller="scrollable"
  .flex.flex-row.border.border-2.border-black role="row"
    .border.border-r-2.border-black role="columnheader"
      | ID
    .border.border-r-2.border-black role="columnheader"
      | Content

	const anchor = document.getElementById('elementID');

	window.scrollBy({
	top: anchor.getBoundingClientRect().top - anchor.offsetTop,
	behavior: 'smooth'
	})

	config.action_mailer.asset_host = 'http://localhost:3000'
	config.action_mailer.raise_delivery_errors = true
	config.action_mailer.perform_caching = false
	config.action_mailer.delivery_method = :smtp
	config.action_mailer.smtp_settings = {
	enable_starttls_auto: true,
	address: 'smtp.gmail.com',
	port: 587,
	authentication: 'plain',
	user_name: '[email protected]',

	<div class="grid grid-cols-4 grid-rows-1">
	<input id="check" type="checkbox" class="peer col-start-2 row-start-1 cursor-pointer transition-all duration-300 checked:translate-x-20 after:w-5 after:h-5 after:rounded-full after:bg-gradient-to-t after:from-gray-200 after:to-slate-300 after:shadow-inner flex justify-center items-center m-3 z-10 appearance-none w-10 h-10 bg-gradient-to-b from-gray-200 to-slate-300 rounded-full"/>
	<label for="check" class="shadow-md col-span-2 col-start-2 row-start-1 flex justify-center items-center after:w-24 after:h-4 after:rounded-full after:shadow-inner after:bg-red-500 after:peer-checked:bg-green-500 h-16 w-36 bg-gradient-to-b from-slate-300 to-slate-100 rounded-full">
	</label>
	<span class="justify-self-end self-center pr-2 font-semibold peer-checked:text-gray-400 text-red-500">OFF</span>
	<span class="justify-self-start self-center pl-2 font-semibold text-gray-400 peer-checked:text-green-500">ON</span>
	</div>

	ruby '2.7.1'

	gem 'rails', github: 'rails/rails'
	gem 'tzinfo-data', '>= 1.2016.7' # Don't rely on OSX/Linux timezone data

	# Action Text
	gem 'actiontext', github: 'basecamp/actiontext', ref: 'okra'
	gem 'okra', github: 'basecamp/okra'

	# Drivers

	psql
	\copy (SELECT username, email, DATE(created_at) AS created_at from users) TO /path/to/local/file.csv CSV HEADER DELIMITER ','