6 files changed, 104 insertions, 0 deletions
diff --git a/src/components/.keep b/src/components/.keep
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/.keep
diff --git a/src/components/base_component.cr b/src/components/base_component.cr
new file mode 100644
index 0000000..c9829b4
--- /dev/null
+++ b/src/components/base_component.cr
@@ -0,0 +1,2 @@
+abstract class BaseComponent < Lucky::BaseComponent
+end
diff --git a/src/components/shared/field.cr b/src/components/shared/field.cr
new file mode 100644
index 0000000..5c32e8a
--- /dev/null
+++ b/src/components/shared/field.cr
@@ -0,0 +1,57 @@
+# This component is used to make it easier to render the same fields styles
+# throughout your app.
+#
+# Extensive documentation at: https://luckyframework.org/guides/frontend/html-forms#shared-components
+#
+# ## Basic usage:
+#
+#    # Renders a text input by default and will guess the label name "Name"
+#    mount Shared::Field, op.name
+#    # Call any of the input methods on the block
+#    mount Shared::Field, op.email, &.email_input
+#    # Add other HTML attributes
+#    mount Shared::Field, op.email, &.email_input(autofocus: "true")
+#    # Pass an explicit label name
+#    mount Shared::Field, attribute: op.username, label_text: "Your username"
+#
+# ## Customization
+#
+# You can customize this component so that fields render like you expect.
+# For example, you might wrap it in a div with a "field-wrapper" class.
+#
+#    div class: "field-wrapper"
+#      label_for field
+#      yield field
+#      mount Shared::FieldErrors, field
+#    end
+#
+# You may also want to have more components if your fields look
+# different in different parts of your app, e.g. `CompactField` or
+# `InlineTextField`
+class Shared::Field(T) < BaseComponent
+  # Raises a helpful error if component receives an unpermitted attribute
+  include Lucky::CatchUnpermittedAttribute
+
+  needs attribute : Avram::PermittedAttribute(T)
+  needs label_text : String?
+
+  def render(&)
+    label_for attribute, label_text
+
+    # You can add more default options here. For example:
+    #
+    #    tag_defaults field: attribute, class: "input"
+    #
+    # Will add the class "input" to the generated HTML.
+    tag_defaults field: attribute do |tag_builder|
+      yield tag_builder
+    end
+
+    mount Shared::FieldErrors, attribute
+  end
+
+  # Use a text_input by default
+  def render
+    render &.text_input
+  end
+end
diff --git a/src/components/shared/field_errors.cr b/src/components/shared/field_errors.cr
new file mode 100644
index 0000000..3f2937a
--- /dev/null
+++ b/src/components/shared/field_errors.cr
@@ -0,0 +1,16 @@
+class Shared::FieldErrors(T) < BaseComponent
+  needs attribute : Avram::PermittedAttribute(T)
+
+  # Customize the markup and styles to match your application
+  def render
+    unless attribute.valid?
+      div class: "error" do
+        text "#{label_text} #{attribute.errors.first}"
+      end
+    end
+  end
+
+  def label_text : String
+    Wordsmith::Inflector.humanize(attribute.name.to_s)
+  end
+end
diff --git a/src/components/shared/flash_messages.cr b/src/components/shared/flash_messages.cr
new file mode 100644
index 0000000..bc44440
--- /dev/null
+++ b/src/components/shared/flash_messages.cr
@@ -0,0 +1,11 @@
+class Shared::FlashMessages < BaseComponent
+  needs flash : Lucky::FlashStore
+
+  def render
+    flash.each do |flash_type, flash_message|
+      div class: "flash-#{flash_type}", flow_id: "flash" do
+        text flash_message
+      end
+    end
+  end
+end
diff --git a/src/components/shared/layout_head.cr b/src/components/shared/layout_head.cr
new file mode 100644
index 0000000..5a05331
--- /dev/null
+++ b/src/components/shared/layout_head.cr
@@ -0,0 +1,18 @@
+class Shared::LayoutHead < BaseComponent
+  needs page_title : String
+
+  def render
+    head do
+      utf8_charset
+      title "My App - #{@page_title}"
+      css_link asset("css/app.css")
+      js_link asset("js/app.js"), defer: "true"
+      csrf_meta_tags
+      responsive_meta_tag
+
+      # Development helper used with the `lucky watch` command.
+      # Reloads the browser when files are updated.
+      live_reload_connect_tag if LuckyEnv.development?
+    end
+  end
+end