name: Components
type: folder
children:
- name: Effects
  type: folder
  children:
    - name: CurvedArrow
      label_en: Curved Arrow
      depPackage: react-curved-arrow
      isSubImport: false
      icon: fas fa-share fa-rotate-45
    - name: Tippy
      label_en: Tooltip (Tippy.js)
      depPackage: "@tippy.js/react"
      isSubImport: false
      icon: fas fa-comment
- name: Blogs
  type: folder
  children:
    - name: ScrollProgressBar
      label_en: Scroll Progress Bar
      depPackage: react-scroll-progress-read
      isSubImport: false
      icon: fas fa-percent
- name: UI Frameworks
  type: folder
  children:
  - name: GatsbyJS
    type: folder
    children:
    - name: Img
      label_en: Image (GatsbyJS)
      depPackage: gatsby-image
      isSubImport: false
      icon: fas fa-image
    - name: Link
      label_en: Link (GatsbyJS)
      depPackage: gatsby
      isSubImport: true
      icon: fas fa-link
      defaultChildren: Link text

  - name: Bootstrap
    type: folder
    children:
    - name: Container
      depPackage: react-bootstrap/Container
      isSubImport: false
      icon: icon-container
      label_en: Container
    - name: Row
      depPackage: react-bootstrap/Row
      isSubImport: false
      icon: icon-section
      label_en: Row
    - name: Col
      depPackage: react-bootstrap/Col
      isSubImport: false
      icon: icon-columns
      label_en: Column
    - name: Image
      depPackage: react-bootstrap/Image
      isSubImport: false
      icon: fas fa-image
      label_en: Image

  - name: Semantic UI
    type: folder
    children:
    - name: Button
      depPackage: semantic-ui-react
      isSubImport: true
      icon: far fa-hand-point-up
      label_en: Button
      description_en: null
      defaultChildren: Button Text
    - name: Table
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-table
      label_en: Table
      description_en: null
    - name: Table.Header
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-heading
      label_en: Table Header
      description_en: null
    - name: Table.HeaderCell
      depPackage: semantic-ui-react
      isSubImport: true
      icon: far fa-square
      label_en: Table Header Cell
      description_en: null
    - name: Table.Row
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-bars
      label_en: Table Row
      description_en: null
    - name: Table.Body
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-square
      label_en: Table Body
      description_en: null
    - name: Table.Cell
      depPackage: semantic-ui-react
      isSubImport: true
      icon: far fa-square
      label_en: Table Cell
      description_en: null
    - name: Menu
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-bars
      label_en: Menu
      description_en: A menu displays grouped navigation actions.
    - name: Menu.Header
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-heading
      label_en: Menu Header
      description_en: null
    - name: Menu.Item
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-sitemap
      label_en: Menu Item
      description_en: null
    - name: Menu.Menu
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-bars
      label_en: Menu Submenu
      description_en: null
    - name: Segment
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-chart-pie
      label_en: Segment
      description_en: A segment is used to create a grouping of related content.
    - name: Segment.Group
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-layer-group
      label_en: Segment Group
      description_en: |
        A group of segments can be formatted to appear together.
    - name: Segment.Inline
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-edit
      label_en: Segment Inline
      description_en: |
        A placeholder segment can be inline.
    - name: Grid
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-th
      label_en: Grid
      description_en: |
        A grid is used to harmonize negative space in a layout.
    - name: Grid.Column
      depPackage: semantic-ui-react
      isSubImport: true
      icon: icon-columns
      label_en: Grid Column
      description_en: A column sub-component for Grid.
    - name: Grid.Row
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-bars
      label_en: Grid Row
      description_en: A row sub-component for Grid.
    - name: Container
      depPackage: semantic-ui-react
      isSubImport: true
      icon: icon-container
      label_en: Container
      description_en: A container limits content to a maximum width.
    - name: Header
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-heading
      label_en: Header
      description_en: A header provides a short summary of content
    - name: Header.Content
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-paragraph
      label_en: Header Content
      description_en: Header content wraps the main content when there is an adjacent
        Icon or Image.
    - name: Header.Subheader
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-heading
      label_en: Header Subheader
      description_en: Headers may contain subheaders.
    - name: List
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-list
      label_en: List
      description_en: A list groups related content.
    - name: List.Content
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-paragraph
      label_en: List Content
      description_en: A list item can contain a content.
    - name: List.Description
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-quote-right
      label_en: List Description
      description_en: |
        A list item can contain a description.
    - name: List.Header
      depPackage: semantic-ui-react
      isSubImport: false
      icon: fas fa-heading
      label_en: List Header
      description_en: A list item can contain a header.
    - name: List.Icon
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-flag
      label_en: List Icon
      description_en: A list item can contain an icon.
    - name: List.Item
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-dot-circle
      label_en: List Item
      description_en: A list item can contain a set of items.
    - name: List.List
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-list
      label_en: List Sublist
      description_en: A list can contain a sub list.
    - name: Image
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-image
      label_en: Image
      description_en: An image is a graphic representation of something.
    - name: Form
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-file-alt
      label_en: Form
      description_en: A Form displays a set of related user input fields in a structured way.
    - name: Form.Button
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-hand-point-up
      label_en: Form Button
      description_en: null
    - name: Form.Checkbox
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-check-square
      label_en: Form Checkbox
      description_en: null
    - name: Form.Dropdown
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-caret-down
      label_en: Form Dropdown
      description_en: null
    - name: Form.Field
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-square
      label_en: Form Field
      description_en: A field is a form element containing a label and an input.
    - name: Form.Group
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-object-group
      label_en: Form Group
      description_en: A set of fields can appear grouped together.
    - name: Form.Input
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-edit
      label_en: Form Input
      description_en: null
    - name: Form.Radio
      depPackage: semantic-ui-react
      isSubImport: true
      icon: far fa-circle
      label_en: Form Radio
      description_en: null
    - name: Form.Select
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-caret-down
      label_en: Form Select
      description_en: null
    - name: Form.TextArea
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-edit
      label_en: Form TextArea
      description_en: null
    - name: Message
      depPackage: semantic-ui-react
      isSubImport: true
      icon: fas fa-exclamation-circle
      label_en: Message
      description_en: A message displays information that explains nearby content.