All files / app/components/home/transaction-list transaction-list-item-container.tsx

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
31
32
33
34
35
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { EnableBefore, listHoverProps, listFocusedProps } from './transaction-list-item-pseudo';
import { Flex, FlexProps } from '@stacks/ui';
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core';
import React from 'react';
 
interface TransactionListItemContainerProps extends FlexProps {
  focused: boolean;
  hovered: boolean;
  txId: string;
}
 
export const TransactionListItemContainer: ForwardRefExoticComponentWithAs<
  TransactionListItemContainerProps,
  'div'
> = forwardRefWithAs<TransactionListItemContainerProps, 'div'>((args, ref) => {
  const { hovered, focused, txId, ...props } = args;
 
  return (
    <Flex
      ref={ref}
      mb="loose"
      cursor="default"
      textAlign="left"
      position="relative"
      outline={0}
      zIndex={2}
      data-txid={txId}
      _before={listHoverProps(hovered)}
      _after={listFocusedProps(focused)}
      {...props}
      as={EnableBefore}
    />
  );
});