diff --git a/lib/claper_web.ex b/lib/claper_web.ex index c41794b..82c232e 100644 --- a/lib/claper_web.ex +++ b/lib/claper_web.ex @@ -111,6 +111,7 @@ defmodule ClaperWeb do # Import design system components import ClaperWeb.Component.Button + import ClaperWeb.Component.Badge unquote(verified_routes()) end diff --git a/lib/claper_web/views/components/badge_component.ex b/lib/claper_web/views/components/badge_component.ex new file mode 100644 index 0000000..1663e8f --- /dev/null +++ b/lib/claper_web/views/components/badge_component.ex @@ -0,0 +1,116 @@ +defmodule ClaperWeb.Component.Badge do + @moduledoc """ + DaisyUI-inspired Badge component for Claper. + + ## Types + - `:contained` - Filled background (default) + - `:outlined` - Border only, transparent background + + ## Styles + - `:default` - Gray background/border (default) + - `:neutral` - Dark background, white text + - `:primary` - Purple theme color + - `:secondary` - Navy purple theme color + - `:accent` - Cyan/teal accent color + - `:ghost` - Transparent, subtle text + + ## Sizes + - `:xs` - Extra small (default) + - `:sm` - Small + - `:md` - Medium + - `:lg` - Large + + ## Examples + + <.badge>Default + <.badge style={:primary}>Primary + <.badge type={:outlined} style={:primary}>Outlined + <.badge size={:lg} style={:accent}>Large Accent + """ + use ClaperWeb, :view_component + + attr :type, :atom, default: :contained, values: [:contained, :outlined] + attr :style, :atom, default: :default, values: [:default, :neutral, :primary, :secondary, :accent, :ghost] + attr :size, :atom, default: :xs, values: [:xs, :sm, :md, :lg] + attr :class, :string, default: nil + attr :rest, :global + + slot :inner_block, required: true + + def badge(assigns) do + ~H""" + + {render_slot(@inner_block)} + + """ + end + + # Base classes for all badges + defp base_classes do + "inline-flex items-center justify-center font-normal font-display rounded-lg whitespace-nowrap" + end + + # Size classes + defp size_classes(:xs), do: "px-2 py-0.5 text-xs leading-4" + defp size_classes(:sm), do: "px-3 py-0.5 text-xs leading-4" + defp size_classes(:md), do: "px-3 py-1 text-sm leading-5" + defp size_classes(:lg), do: "px-4 py-1.5 text-base leading-6" + + # Style classes for contained type + defp style_classes(:contained, :default) do + "bg-gray-200 text-gray-700" + end + + defp style_classes(:contained, :neutral) do + "bg-neutral-800 text-neutral-50" + end + + defp style_classes(:contained, :primary) do + "bg-primary-500 text-white" + end + + defp style_classes(:contained, :secondary) do + "bg-secondary-500 text-white" + end + + defp style_classes(:contained, :accent) do + "bg-supporting-green-400 text-supporting-green-900" + end + + defp style_classes(:contained, :ghost) do + "bg-gray-100 text-gray-700" + end + + # Style classes for outlined type + defp style_classes(:outlined, :default) do + "bg-transparent border border-gray-300 text-gray-700" + end + + defp style_classes(:outlined, :neutral) do + "bg-transparent border border-neutral-800 text-neutral-800" + end + + defp style_classes(:outlined, :primary) do + "bg-transparent border border-primary-500 text-primary-500" + end + + defp style_classes(:outlined, :secondary) do + "bg-transparent border border-secondary-500 text-secondary-500" + end + + defp style_classes(:outlined, :accent) do + "bg-transparent border border-supporting-green-500 text-supporting-green-500" + end + + defp style_classes(:outlined, :ghost) do + "bg-transparent border border-gray-200 text-gray-600" + end +end diff --git a/uploads/uploads/30063832/1.jpg b/uploads/uploads/30063832/1.jpg new file mode 100644 index 0000000..fdecba0 Binary files /dev/null and b/uploads/uploads/30063832/1.jpg differ diff --git a/uploads/uploads/30063832/2.jpg b/uploads/uploads/30063832/2.jpg new file mode 100644 index 0000000..c0975d1 Binary files /dev/null and b/uploads/uploads/30063832/2.jpg differ diff --git a/uploads/uploads/30063832/original.pdf b/uploads/uploads/30063832/original.pdf new file mode 100644 index 0000000..1e75832 Binary files /dev/null and b/uploads/uploads/30063832/original.pdf differ