@aris_acoba/playground

https://github.com/arisacoba/playground/labels/good%20first%20issue

Sample code from Primer

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

module Primer
  module Beta
    class Breadcrumbs < Primer::Component
      status :beta
      PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead." PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead." PADDING_MESSAGE = "Padding system arguments are not allowed on Breadcrumbs. Consider using margins instead."
      FONT_SIZE_MESSAGE = "Breadcrumbs do not support the font_size system argument."
      ARIA_LABEL = { label: "Breadcrumb" }.freeze
      ARGS_DENYLIST = {
        [:p, :pt, :pb, :pr, :pl, :px, :py] => PADDING_MESSAGE,
        [:font_size] => FONT_SIZE_MESSAGE
      }.freeze
      renders_many :items, "Item"

      def initialize(**system_arguments)
        @system_arguments = system_arguments
        @system_arguments[:tag] = :nav
        @system_arguments[:aria] = ARIA_LABEL
        @system_arguments[:system_arguments_denylist] = ARGS_DENYLIST
      end

      def render?
        items.any?
      end

      # This component is part of `Primer::Beta::Breadcrumbs` and should not be
      # used as a standalone component.
      class Item < Primer::Component
        attr_accessor :selected, :href

        def initialize(href:, **system_arguments)
          @href = href
          @system_arguments = system_arguments
          @selected = false

          @system_arguments[:tag] = :li
          @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
        end

        def call
          link_arguments = { href: @href }

          if selected
            link_arguments[:"aria-current"] = "page"
            @system_arguments[:classes] = "#{@system_arguments[:classes]} breadcrumb-item-selected"
          end

          render(Primer::BaseComponent.new(**@system_arguments)) do
            render(Primer::LinkComponent.new(**link_arguments)) { content }
          end
        end
      end
    end
  end
end

function Breadcrumbs({className, children, sx: sxProp}: React.PropsWithChildren<BreadcrumbsProps>) {
  const wrappedChildren = React.Children.map(children, child => <Wrapper>{child}</Wrapper>)
  return (
    <BreadcrumbsBase className={className} aria-label="Breadcrumbs" sx={sxProp}>
      <Box as="ol" my={0} pl={0}>
        {wrappedChildren}
      </Box>
    </BreadcrumbsBase>
  )
}