feat(protocol-visualization): port SlotDetailsEmptyState (#21249)

# Overview

This is a simple porting of `SlotDetailsEmptyState` component and
related tests from `app` into `ProtocolVisualization` with minimal
changes. This is step 3 of the porting plan.

## Risk assessment

- None. Only copies over the said files in a package that is not used
anywhere yet.

Author: sanni-t

protocol-visualization/src/index.ts

@@ -11,6 +11,8 @@ export { AnnotatedSteps } from './organisms/AnnotatedSteps'
 
 export type { GroupedCommands, LeafNode } from './types'
 
+export { SlotDetailsEmptyState } from './molecules/SlotDetailsEmptyState'
+
 /**
  * Package identifier string (useful for diagnostics or feature flags).
  */

protocol-visualization/src/molecules/SlotDetailsEmptyState/__tests__/SlotDetailsEmptyState.test.tsx

@@ -0,0 +1,27 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, it } from 'vitest'
+
+import { SlotDetailsEmptyState } from '..'
+import { renderWithProviders } from '../../../__testing-utils__'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof SlotDetailsEmptyState>) => {
+  return renderWithProviders(<SlotDetailsEmptyState {...props} />) // TODO: add i18n rendering option
+}
+
+describe('SlotDetailsEmptyState', () => {
+  let props: ComponentProps<typeof SlotDetailsEmptyState>
+
+  beforeEach(() => {
+    props = {
+      slotId: 'A1',
+    }
+  })
+
+  it('should render slot empty state', () => {
+    render(props)
+    screen.getByText('A1')
+    screen.getByText('slot_empty')
+  })
+})

protocol-visualization/src/molecules/SlotDetailsEmptyState/index.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next'
+
+import { COLORS, RobotInfoLabel, StyledText } from '@opentrons/components'
+
+import styles from './slotdetailsemptystate.module.css'
+
+interface SlotDetailsEmptyStateProps {
+  slotId: string
+}
+
+export function SlotDetailsEmptyState(
+  props: SlotDetailsEmptyStateProps
+): JSX.Element {
+  const { slotId } = props
+  const { t } = useTranslation('protocol_visualization')
+  return (
+    <div className={styles.slot_empty_container}>
+      <div className={styles.slot_empty_header}>
+        <RobotInfoLabel deckLabel={slotId} />
+      </div>
+      <div className={styles.slot_empty_body}>
+        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey50}>
+          {t('slot_empty')}
+        </StyledText>
+      </div>
+    </div>
+  )
+}

protocol-visualization/src/molecules/SlotDetailsEmptyState/slotdetailsemptystate.module.css

@@ -0,0 +1,24 @@
+.slot_empty_container {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+.slot_empty_header {
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.slot_empty_body {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-16) var(--spacing-24);
+  border-radius: var(--border-radius-4);
+  background-color: var(--grey-10);
+}