xref: /expo/docs/ui/components/Table/Row.tsx (revision 14c78e61)
1import { css } from '@emotion/react';
2import { theme } from '@expo/styleguide';
3import React, { PropsWithChildren } from 'react';
4
5type RowProps = PropsWithChildren<{
6  subtle?: boolean;
7}>;
8
9export const Row = ({ children, subtle }: RowProps) => (
10  <tr css={[tableRowStyle, subtle && subtleStyle]}>{children}</tr>
11);
12
13const tableRowStyle = css({
14  '&:nth-of-type(2n)': {
15    backgroundColor: theme.background.subtle,
16
17    summary: {
18      backgroundColor: theme.background.element,
19    },
20  },
21});
22
23const subtleStyle = css({
24  opacity: '0.5',
25});
26