File size: 868 Bytes
8a37e0a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Flex, Text } from '@invoke-ai/ui-library';
import { RecallButton } from 'features/metadata/components/RecallButton';
import { memo } from 'react';

type MetadataItemViewProps = {
  onRecall: () => void;
  label: string;
  renderedValue: React.ReactNode;
  isDisabled: boolean;
  direction?: 'row' | 'column';
};

export const MetadataItemView = memo(
  ({ label, onRecall, isDisabled, renderedValue, direction = 'row' }: MetadataItemViewProps) => {
    return (
      <Flex gap={2}>
        {onRecall && <RecallButton label={label} onClick={onRecall} isDisabled={isDisabled} />}
        <Flex direction={direction} fontSize="sm">
          <Text fontWeight="semibold" whiteSpace="pre-wrap" pr={2}>
            {label}:
          </Text>
          {renderedValue}
        </Flex>
      </Flex>
    );
  }
);

MetadataItemView.displayName = 'MetadataItemView';