;
+ }
+ return (
+
+ }
+ />
+
+
+ {t('Last seen')}
+
+
+
+ );
+}
+
+const IssueWrapper = styled(Link)<{disabled: boolean}>`
+ color: ${p => (p.disabled ? p.theme.disabled : p.theme.textColor)};
+ font-size: ${p => p.theme.fontSizeMedium};
+
+ ${p =>
+ !p.disabled &&
+ `
+ &:hover {
+ color: ${p.theme.textColor};
+ }
+ `}
+`;
+
+const LastSeenWrapper = styled(Flex)`
+ color: ${p => p.theme.subText};
+`;
diff --git a/static/app/components/workflowEngine/gridCell/numberCell.tsx b/static/app/components/workflowEngine/gridCell/numberCell.tsx
new file mode 100644
index 00000000000000..da19abb2f351ee
--- /dev/null
+++ b/static/app/components/workflowEngine/gridCell/numberCell.tsx
@@ -0,0 +1,7 @@
+type NumberCellProps = {
+ number: number;
+};
+
+export function NumberCell({number}: NumberCellProps) {
+ return {number}
;
+}
diff --git a/static/app/components/workflowEngine/gridCell/titleCell.tsx b/static/app/components/workflowEngine/gridCell/titleCell.tsx
new file mode 100644
index 00000000000000..0221a6993d1860
--- /dev/null
+++ b/static/app/components/workflowEngine/gridCell/titleCell.tsx
@@ -0,0 +1,108 @@
+import {Fragment} from 'react';
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+import ProjectBadge from 'sentry/components/idBadge/projectBadge';
+import Link from 'sentry/components/links/link';
+import {space} from 'sentry/styles/space';
+import type {AvatarProject} from 'sentry/types/project';
+
+export type TitleCellProps = {
+ link: string;
+ name: string;
+ project: AvatarProject;
+ details?: string[];
+ disabled?: boolean;
+};
+
+export function TitleCell({
+ name,
+ project,
+ details,
+ link,
+ disabled = false,
+}: TitleCellProps) {
+ return (
+
+
+
+ {name}
+ {disabled && — Disabled}
+
+
+
+ {details?.map((detail, index) => (
+
+
+ {detail}
+
+ ))}
+
+
+
+ );
+}
+
+const Name = styled('div')<{disabled: boolean}>`
+ color: ${p => p.theme.textColor};
+ display: flex;
+ flex-direction: row;
+ gap: ${space(0.5)};
+
+ ${p =>
+ p.disabled &&
+ `
+ color: ${p.theme.disabled};
+ `}
+`;
+
+const TitleWrapper = styled(Link)<{disabled: boolean}>`
+ display: flex;
+ flex-direction: column;
+ gap: ${space(0.5)};
+
+ ${p =>
+ !p.disabled &&
+ `
+ &:hover ${Name} {
+ color: ${p.theme.textColor};
+ text-decoration: underline;
+ }
+ `}
+`;
+
+const DetailsWrapper = styled('div')`
+ display: inline-grid;
+ grid-auto-flow: column dense;
+ gap: ${space(0.75)};
+ justify-content: start;
+ align-items: center;
+ color: ${p => p.theme.subText};
+ min-width: 500px;
+ white-space: nowrap;
+ line-height: 1.2;
+
+ @media (min-width: ${p => p.theme.breakpoints.xlarge}) {
+ line-height: 1;
+ }
+`;
+
+const StyledProjectBadge = styled(ProjectBadge)`
+ color: ${p => p.theme.subText};
+`;
+
+const Separator = styled('span')`
+ height: 10px;
+ width: 1px;
+ background-color: ${p => p.theme.innerBorder};
+ border-radius: 1px;
+`;