Line data    Source code

       1              : import * as React from 'react';
       2              : 
       3              : import * as styles from './json_view.module.css';
       4              : 
       5              : import icons from '@ankoh/dashql-svg-symbols';
       6              : 
       7            1 : export function JsonArrowSymbol(props: { isExpanded: boolean }) {
       8            1 :     const style: React.CSSProperties = {
       9            1 :         transform: `rotate(${props.isExpanded ? '0' : '-90'}deg)`,
      10            1 :         transition: 'all 0.3s',
      11            1 :     };
      12            1 :     return (
      13            1 :         <span
      14            1 :             className={styles.symbol_arrow_container}
      15            1 :             data-expanded={props.isExpanded}
      16            1 :             style={{
      17            1 :                 transform: 'rotate(0deg)',
      18            1 :                 transition: 'all 0.3s',
      19            1 :                 ...style,
      20            1 :             }}
      21              :         >
      22            1 :             <svg
      23            1 :                 className={styles.symbol_arrow}
      24            1 :                 fill="currentColor"
      25              :             >
      26            1 :                 <use xlinkHref={`${icons}#chevron_down_24`} />
      27            1 :             </svg>
      28            1 :         </span>
      29              :     );
      30            1 : };