diff --git a/app/controllers/components_controller.rb b/app/controllers/components_controller.rb index b466c8f..5816f84 100644 --- a/app/controllers/components_controller.rb +++ b/app/controllers/components_controller.rb @@ -1,5 +1,5 @@ class ComponentsController < ApplicationController - @@available_templates = %w[toggle select tabs] + @@available_templates = %w[toggle select tabs navigation] def index @available_templates = @@available_templates end diff --git a/app/helpers/breadcrumbs_helper.rb b/app/helpers/breadcrumbs_helper.rb new file mode 100644 index 0000000..2198602 --- /dev/null +++ b/app/helpers/breadcrumbs_helper.rb @@ -0,0 +1,8 @@ +module BreadcrumbsHelper + # set_breadcrumbs [[name1, url1], [name2, url2], ...] + def set_breadcrumbs(breadcrumbs_array) + content_for(:breadcrumbs) do + render "breadcrumbs", breadcrumbs: breadcrumbs_array + end + end +end diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js index 13c4e98..4722524 100644 --- a/app/javascript/controllers/index.js +++ b/app/javascript/controllers/index.js @@ -7,6 +7,9 @@ import { application } from "./application" import HelloController from "./hello_controller" application.register("hello", HelloController) +import NavbarController from "./navbar_controller" +application.register("navbar", NavbarController) + import SelectMenuController from "./select_menu_controller" application.register("select-menu", SelectMenuController) diff --git a/app/javascript/controllers/navbar_controller.js b/app/javascript/controllers/navbar_controller.js new file mode 100644 index 0000000..538c453 --- /dev/null +++ b/app/javascript/controllers/navbar_controller.js @@ -0,0 +1,7 @@ +import { Controller } from "@hotwired/stimulus" + +// Connects to data-controller="navbar" +export default class extends Controller { + connect() { + } +} diff --git a/app/views/application/_breadcrumbs.erb b/app/views/application/_breadcrumbs.erb new file mode 100644 index 0000000..045b51d --- /dev/null +++ b/app/views/application/_breadcrumbs.erb @@ -0,0 +1,27 @@ +<%# locals: (breadcrumbs: []) %> + diff --git a/app/views/components/_template.html.erb b/app/views/components/_template.html.erb index 819be71..5391c5a 100644 --- a/app/views/components/_template.html.erb +++ b/app/views/components/_template.html.erb @@ -1,5 +1,7 @@ <%# locals:(title:, description:) %> +<% content_for(:title, "#{title} | Tailwind, ERB & Stimulus") %> +
@@ -10,7 +12,7 @@ <%= description %>

-
+
<%= yield %>
diff --git a/app/views/components/index.html.erb b/app/views/components/index.html.erb index 9b5c94e..fb668f4 100644 --- a/app/views/components/index.html.erb +++ b/app/views/components/index.html.erb @@ -1,6 +1,18 @@ -<% @available_templates.each do |template| %> -
- <%= link_to template, component_path(template), - class: "text-indigo-600 underline"%> -
-<% end %> +

Tailwind Components with ERB and Stimulus

+ +

+ This site provides examples of Tailwind widgets using Simulus for animation and responsiveness. +

+ +
+ <% @available_templates.each do |template| %> +
+ <%= link_to component_path(template), + class: "text-center text-gray-600 font-bold text-lg" do %> +
+ <%= template %> +
+ <% end %> +
+ <% end %> +
diff --git a/app/views/components/navigation.html.erb b/app/views/components/navigation.html.erb new file mode 100644 index 0000000..53e2ed6 --- /dev/null +++ b/app/views/components/navigation.html.erb @@ -0,0 +1,125 @@ +<%= render 'template', + title: "Navigation", + description: "" do %> + + + + + + + + + + +<% end %> diff --git a/app/views/components/toggle.html.erb b/app/views/components/toggle.html.erb index 78749ef..7eb7213 100644 --- a/app/views/components/toggle.html.erb +++ b/app/views/components/toggle.html.erb @@ -1,3 +1,5 @@ +<% set_breadcrumbs [["Toggle switch", component_path(:toggle)]] %> + <%= render 'template', title: "Toggle switch Component", description: "Simple Toggle Switch" do %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c92750e..387caad 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,23 +1,26 @@ - - <%= content_for(:title) || "Tailwind Rails" %> - - - <%= csrf_meta_tags %> - <%= csp_meta_tag %> + + <%= content_for(:title) || "Tailwind Rails" %> + + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> - <%= yield :head %> + <%= yield :head %> - - - - - <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> - <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> - + + + + + <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> + <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> + - - <%= yield %> - + +
+
<%= content_for(:breadcrumbs) %>
+ <%= yield %> +
+ diff --git a/config/routes.rb b/config/routes.rb index deb8981..e14613d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -10,7 +10,7 @@ get "manifest" => "rails/pwa#manifest", as: :pwa_manifest # Defines the root path route ("/") - # root "posts#index" + root "components#index" resources :components, only: [ :index, :show ] end diff --git a/db/schema.rb b/db/schema.rb new file mode 100644 index 0000000..d37677e --- /dev/null +++ b/db/schema.rb @@ -0,0 +1,14 @@ +# This file is auto-generated from the current state of the database. Instead +# of editing this file, please use the migrations feature of Active Record to +# incrementally modify your database, and then regenerate this schema definition. +# +# This file is the source Rails uses to define your schema when running `bin/rails +# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to +# be faster and is potentially less error prone than running all of your +# migrations from scratch. Old migrations may fail to apply correctly if those +# migrations use external dependencies or application code. +# +# It's strongly recommended that you check this file into your version control system. + +ActiveRecord::Schema[7.2].define(version: 0) do +end