diff --git a/pages/launches/index.tsx b/pages/launches/index.tsx index a64d9db..be686af 100644 --- a/pages/launches/index.tsx +++ b/pages/launches/index.tsx @@ -77,10 +77,11 @@ export default function LaunchesPage() { {!isLoadingAllLaunches && launches.length > 0 && ( - {launches.map((launch) => ( + {launches.map((launch, index) => ( ))} diff --git a/src/components/LaunchCard/LaunchSummaryCard.tsx b/src/components/LaunchCard/LaunchSummaryCard.tsx index b841826..e6ee40f 100644 --- a/src/components/LaunchCard/LaunchSummaryCard.tsx +++ b/src/components/LaunchCard/LaunchSummaryCard.tsx @@ -7,16 +7,21 @@ import { LaunchSummaryCardProps } from '@/src/shared/props/components/launch-sum import MapIcon from '@mui/icons-material/Map'; import { colors } from '@/src/shared/styles/colors'; -export default function LaunchSummaryCard({ launch, onDetailsClick }: LaunchSummaryCardProps) { +export default function LaunchSummaryCard({ launch, index, onDetailsClick }: LaunchSummaryCardProps) { return ( - - {formatLaunchName(launch.name)} - + + + {`#${index + 1}`} + + + {formatLaunchName(launch.name)} + + } label={formatAltitudeInKm(launch.max_altitude)} @@ -54,7 +59,9 @@ const cardSx = { height: '100%', borderRadius: 3 }; const chipSx = { backgroundColor: colors.primary[600] }; const cardHeaderSx = { pb: 0 }; const titleBoxSx = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }; +const titleTextBoxSx = { display: 'flex', alignItems: 'center', gap: 1 }; const titleTypographySx = { fontWeight: 700 }; +const indexTypographySx = { fontWeight: 500, color: colors.primary[600] }; const cardContentSx = { py: 0, mb: 0 }; const citiesBoxSx = { display: 'flex', alignItems: 'flex-start' }; const cardActionsSx = { justifyContent: 'flex-end', pt: 0 }; diff --git a/src/shared/props/components/launch-summary-card.props.ts b/src/shared/props/components/launch-summary-card.props.ts index 04c6385..e7be01d 100644 --- a/src/shared/props/components/launch-summary-card.props.ts +++ b/src/shared/props/components/launch-summary-card.props.ts @@ -2,5 +2,6 @@ import { LaunchSummary } from '../../types/api/launches-api.types'; export type LaunchSummaryCardProps = { launch: LaunchSummary; + index: number; onDetailsClick: (launch: LaunchSummary) => void; };