UNPKG

@grafana/ui

Version:
1 lines 2.04 kB
{"version":3,"file":"Divider.mjs","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\ninterface DividerProps {\n direction?: 'vertical' | 'horizontal';\n spacing?: ThemeSpacingTokens;\n}\n\nexport const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {\n const styles = useStyles2(getStyles, spacing);\n\n if (direction === 'vertical') {\n return <div className={styles.verticalDivider}></div>;\n } else {\n return <hr className={styles.horizontalDivider} />;\n }\n};\n\nDivider.displayName = 'Divider';\n\nconst getStyles = (theme: GrafanaTheme2, spacing: ThemeSpacingTokens) => {\n return {\n horizontalDivider: css({\n borderTop: `1px solid ${theme.colors.border.weak}`,\n margin: theme.spacing(spacing, 0),\n width: '100%',\n }),\n verticalDivider: css({\n borderRight: `1px solid ${theme.colors.border.weak}`,\n margin: theme.spacing(0, spacing),\n height: '100%',\n }),\n };\n};\n"],"names":[],"mappings":";;;;AAWO,MAAM,UAAU,CAAC,EAAE,YAAY,YAAc,EAAA,OAAA,GAAU,GAAsB,KAAA;AAClF,EAAM,MAAA,MAAA,GAAS,UAAW,CAAA,SAAA,EAAW,OAAO,CAAA;AAE5C,EAAA,IAAI,cAAc,UAAY,EAAA;AAC5B,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,eAAiB,EAAA,CAAA;AAAA,GAC1C,MAAA;AACL,IAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA,EAAG,SAAW,EAAA,MAAA,CAAO,iBAAmB,EAAA,CAAA;AAAA;AAEpD;AAEA,OAAA,CAAQ,WAAc,GAAA,SAAA;AAEtB,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,OAAgC,KAAA;AACvE,EAAO,OAAA;AAAA,IACL,mBAAmB,GAAI,CAAA;AAAA,MACrB,SAAW,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MAChD,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,OAAA,EAAS,CAAC,CAAA;AAAA,MAChC,KAAO,EAAA;AAAA,KACR,CAAA;AAAA,IACD,iBAAiB,GAAI,CAAA;AAAA,MACnB,WAAa,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,MAClD,MAAQ,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,OAAO,CAAA;AAAA,MAChC,MAAQ,EAAA;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}