RhInfoSection

The RhInfoSection component is reusable and can be used in any React application to render information sections with the specified props.

Usage

Once installed, you can import the RhInfoSection component into your React application:

copy

import {RhInfoSection} from "@rhythm-ui/react"

Then, you can use the RhInfoSection component in your JSX code:

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={false}
  tableDirection="row"
>
  <RhInfoSectionItem label="Company Name" infoDirection="row">
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Parent Companay" infoDirection="row">
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Since Year" infoDirection="row">
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Country" infoDirection="row">
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Current Address" infoDirection="row">
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Website" infoDirection="row">
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

RhInfoSection Props

Name	Type	Default	Description
header	React.ReactNode		<b>header</b> prop is an optional prop, takes the value as JSX Element or React Node.
border	boolean	false	<b>border</b> prop is an optional prop, that takes a boolean value. If <i>true</i>, info section will have border for each label and value - By default it is false.
tableDirection	"row" \| "column"	row	<b>tableDirection</b> is an optional prop, takes value as <b>row</b> or <b>column</b>. -- If value is <b>row</b>, you do not need to give <b>columns</b> prop in child component. -- if value is <b>column</b>, you need to provide <b>columnSpan</b> props value in the child comopnent. -- <b>columnSpan</b> prop of child component <i>Item</i>, takes value as an object. This object contains 6 keys. -- Those keys are <b>xs</b>, <b>sm</b>, <b>md</b>, <b>lg</b>, <b>xl</b> -- These keys accept values from 1 to 12. These keys value decides how much space one Item will cover on a page. -- 12 Means 100 percent width. You can arrange your info section using this prop by providing value to each Item and can be made responsive for any screen size. -- Look at the below examples to get more idea about this prop.
spacing	"condensed" \| "relaxed"	relaxed	<b>spacing</b> prop takes value as <i>relaxed</i> or <i>condensed</i>. - Spacing between row lines gets reduced in <i>condensed</i> value. - By default value remains <b>relaxed</b>

Row with border

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={true}
  tableDirection="row"
>
  <RhInfoSectionItem label="Company Name" infoDirection="row">
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Parent Companay" infoDirection="row">
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Since Year" infoDirection="row">
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Country" infoDirection="row">
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Current Address" infoDirection="row">
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Website" infoDirection="row">
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

Condensed Spacing

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={true}
  tableDirection="row"
  spacing="condensed"
>
  <RhInfoSectionItem label="Company Name" infoDirection="row">
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Parent Companay" infoDirection="row">
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Since Year" infoDirection="row">
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Country" infoDirection="row">
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Current Address" infoDirection="row">
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Website" infoDirection="row">
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

Label Shade With Row

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={true}
  tableDirection="row"
>
  <RhInfoSectionItem label="Company Name" infoDirection="row" labelShade>
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Parent Companay" infoDirection="row" labelShade>
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Since Year" infoDirection="row" labelShade>
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Country" infoDirection="row" labelShade>
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Current Address" infoDirection="row" labelShade>
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem label="Website" infoDirection="row" labelShade>
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

Column Alignment

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={false}
  tableDirection="column"
>
  <RhInfoSectionItem
    label="Company Name"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Parent Companay"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Since Year"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Country"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Current Address"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Website"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

Column With Label Shade

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={false}
  tableDirection="column"
>
  <RhInfoSectionItem
    label="Company Name"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Parent Companay"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Since Year"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Country"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Current Address"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Website"
    infoDirection="row"
    columnSpan={{ xs: 12, sm: 6 }}
    labelShade
  >
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>

Vertical Info Alignment

copy

<RhInfoSection
  header={
    <div>
      <h3 className="text-lg leading-6 font-medium ">Codemonk</h3>
      <p className="mt-1 max-w-2xl text-sm ">
        Your parter for every technology solution
      </p>
    </div>
  }
  border={false}
  tableDirection="column"
>
  <RhInfoSectionItem
    label="Company Name"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    Codemonk
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Parent Companay"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    Elvago Technology
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Since Year"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    2018
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Country"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    India
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Current Address"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 12 }}
  >
    Hustlehub Tech Park, #36/5, Somasandrapalya, Sector 2, adjacent 27th Main
    Road, HSR Layout, Bengaluru, Karnataka 560102
  </RhInfoSectionItem>
  <RhInfoSectionItem
    label="Website"
    infoDirection="column"
    columnSpan={{ xs: 12, sm: 6 }}
  >
    <a href="https://codemonk.in/">Codemonk.in</a>
  </RhInfoSectionItem>
</RhInfoSection>