Aspect Ratio

# frozen_string_literal: true

module RubyUI
	class AspectRatio < Base
		def initialize(aspect_ratio: "16/9", **attrs)
			raise "aspect_ratio must be in the format of a string with a slash in the middle (eg. '16/9', '1/1')" unless aspect_ratio.is_a?(String) && aspect_ratio.include?("/")

			@aspect_ratio = aspect_ratio
			super(**attrs)
		end

		def view_template(&block)
			div(
				class: "relative w-full",
				style: "padding-bottom: #{padding_bottom}%;"
			) do
				div(**attrs, &block)
			end
		end

		private

		def padding_bottom
			@aspect_ratio.split("/").map(&:to_i).reverse.reduce(&:fdiv) * 100
		end

		def default_attrs
			{
				class: "bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"
			}
		end
	end
end

# frozen_string_literal: true

class Views::Docs::AspectRatio < Views::Base
	def view_template
		component = "AspectRatio"
		div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
			render Docs::Header.new(title: "Aspect Ratio", description: "Displays content within a desired ratio.")

			Heading(level: 2) { "Usage" }

			render Docs::VisualCodeExample.new(title: "16/9", context: self) do
				<<~RUBY
					AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border shadow-sm") do
						img(
							alt: "Placeholder",
							loading: "lazy",
							src: image_path('pattern.jpg')
						)
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "4/3", context: self) do
				<<~RUBY
					AspectRatio(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do
						img(
							alt: "Placeholder",
							loading: "lazy",
							src: image_path('pattern.jpg')
						)
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "1/1", context: self) do
				<<~RUBY
					AspectRatio(aspect_ratio: "1/1", class: "rounded-md overflow-hidden border shadow-sm") do
						img(
							alt: "Placeholder",
							loading: "lazy",
							src: image_path('pattern.jpg')
						)
					end
				RUBY
			end

			render Docs::VisualCodeExample.new(title: "21/9", context: self) do
				<<~RUBY
					AspectRatio(aspect_ratio: "21/9", class: "rounded-md overflow-hidden border shadow-sm") do
						img(
							alt: "Placeholder",
							loading: "lazy",
							src: image_path('pattern.jpg')
						)
					end
				RUBY
			end

			render Components::ComponentSetup::Tabs.new(component_name: component)

			render Docs::ComponentsTable.new(component_files(component))
		end
	end
end