typescript jsxstyle example

SidebarGroup.tsx

import * as React from 'react';

import { Block, Row } from 'jsxstyle';

import { SidebarNavLink } from './SidebarNavLink';
import { COLORS } from '../theme';

export interface SidebarGroupItemProps {
  name: string;
  link: string;
  iconName: string;
  enabled?: boolean;
}

export interface SidebarGroupProps {
  name: string;
  link?: string;
  isOpen?: string;
  kids: SidebarGroupItemProps[];
  onClose: () => void;
}

export const SidebarGroup: React.SFC<SidebarGroupProps> = ({ name, kids }) =>
  <Block marginBottom="1.5rem">
    <Block
      padding=".5rem 1rem"
      textTransform="uppercase"
      color={COLORS.gray.normal}
      fontSize=".75rem"
      fontWeight="bold"
      letterSpacing=".08em"
    >
      {name}
    </Block>
    {kids.map((child: SidebarGroupItemProps) =>
      <SidebarNavLink
        key={child.link}
        to={child.link}
        onClick={this.props.onClose}
        activeStyle={{
          fontWeight: 'bold',
          color: COLORS.gray.lightest,
          backgroundColor: COLORS.blue.darker,
        }}
      >
        <Row padding=".5rem 1rem">
          <Block width={32}>
            <i className={`fa fa-${child.iconName}`} />
          </Block>
          <Block flex="1">
            {child.name}
          </Block>
        </Row>
      </SidebarNavLink>
    )}
  </Block>;