import {ComponentProps, Fragment, ReactNode} from 'react';
import styled from '@emotion/styled';
import {Location} from 'history';
import {LinkButton} from 'sentry/components/button';
import {IconCursorArrow, IconShow} from 'sentry/icons';
import {t} from 'sentry/locale';
import {space} from 'sentry/styles/space';
import useDeadRageSelectors from 'sentry/utils/replays/hooks/useDeadRageSelectors';
import {useLocation} from 'sentry/utils/useLocation';
import useOrganization from 'sentry/utils/useOrganization';
import {normalizeUrl} from 'sentry/utils/withDomainRequired';
import SelectorTable from 'sentry/views/replays/deadRageClick/selectorTable';
function DeadRageSelectorCards() {
const location = useLocation();
return (
);
}
function DeadClickTable({location}: {location: Location}) {
const {isLoading, isError, data} = useDeadRageSelectors({
per_page: 4,
sort: '-count_dead_clicks',
cursor: undefined,
prefix: 'selector_',
});
return (
{t('Most Dead Clicks')}
}
headerButtons={
}
customHandleResize={() => {}}
/>
);
}
function RageClickTable({location}: {location: Location}) {
const {isLoading, isError, data} = useDeadRageSelectors({
per_page: 4,
sort: '-count_rage_clicks',
cursor: undefined,
prefix: 'selector_',
});
return (
{t('Most Rage Clicks')}
}
headerButtons={
}
customHandleResize={() => {}}
/>
);
}
function SearchButton({
label,
sort,
path,
...props
}: {
label: ReactNode;
path: string;
sort: string;
} & Omit, 'size' | 'to'>) {
const location = useLocation();
const organization = useOrganization();
return (
}
>
{label}
);
}
const SplitCardContainer = styled('div')`
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: max-content max-content;
grid-auto-flow: column;
gap: 0 ${space(2)};
align-items: stretch;
padding-top: ${space(1)};
`;
const IconContainer = styled('span')`
margin-right: ${space(1)};
`;
export default DeadRageSelectorCards;