import styled from '@emotion/styled'; import {LinkButton} from 'sentry/components/button'; import {space} from 'sentry/styles/space'; import type {Event} from 'sentry/types/event'; import type {Group} from 'sentry/types/group'; import {trackAnalytics} from 'sentry/utils/analytics'; import type {IssueTypeConfig, ResourceLink} from 'sentry/utils/issueTypeConfig/types'; import useOrganization from 'sentry/utils/useOrganization'; type Props = { configResources: NonNullable; eventPlatform: Event['platform']; group: Group; }; export default function Resources({configResources, eventPlatform, group}: Props) { const organization = useOrganization(); const links: ResourceLink[] = [ ...configResources.links, ...(configResources.linksByPlatform[eventPlatform ?? ''] ?? []), ]; return (

{configResources.description}

{links.map(({link, text}) => ( trackAnalytics('issue_details.resources_link_clicked', { organization, resource: text, group_id: group.id, }) } key={link} href={link} external priority="link" > {text} ))}
); } const LinkSection = styled('div')` display: flex; flex-direction: column; align-items: flex-start; text-decoration: underline; text-decoration-color: ${p => p.theme.linkUnderline}; gap: ${space(1)}; margin-top: ${space(1)}; `;