Add the most basic card component

For now this is basically just a frame. Going forward I expect us to add
more details and functionality in order to implement all of the options
of https://flowbite.com/docs/components/card/ - but for now the most
basic version is a good start.

Author: koppen

CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Button component (first component, wee!)
 * Input components
 * InputField components
+* Basic Card component
 
 ### Changes
 

app/components/flowbite/card.rb

@@ -0,0 +1,29 @@
+module Flowbite
+  # Renders a card element.
+  #
+  # See https://flowbite.com/docs/components/cards/
+  class Card < ViewComponent::Base
+    class << self
+      def classes(size: :default, state: :default, style: :default)
+        style = styles.fetch(style)
+        style.fetch(state)
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          default: Flowbite::Style.new(
+            default: ["max-w-sm", "p-6", "bg-white", "border", "border-gray-200", "rounded-lg", "shadow-sm", "dark:bg-gray-800", "dark:border-gray-700"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    def call
+      content_tag(:div, class: self.class.classes) do
+        concat(content_tag(:div, content, class: "font-normal text-gray-700 dark:text-gray-400"))
+      end
+    end
+  end
+end

demo/test/components/previews/card_preview.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class CardPreview < Lookbook::Preview
+  # Use the following simple card component with a title and description.
+  def default
+    render(Flowbite::Card.new) { "Use the following simple card component with a title and description." }
+  end
+end

test/components/flowbite/card_test.rb

@@ -0,0 +1,11 @@
+require "test_helper"
+
+class Flowbite::CardTest < Minitest::Test
+  include ViewComponent::TestHelpers
+
+  def test_renders_a_default_card
+    render_inline(Flowbite::Card.new) { "Card Content" }
+
+    assert_selector("div.p-6.bg-white.border.border-gray-200.rounded-lg.shadow-sm")
+  end
+end