import * as React from 'react'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; import Chip from '@mui/material/Chip'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; export type PlanId = 'startup' | 'standard' | 'business'; export interface Plan { id: PlanId; name: string; currency: string; price: number; } export interface PlanCardProps { plan: Plan; isCurrent?: boolean; } export function PlanCard({ plan, isCurrent }: PlanCardProps): React.JSX.Element { return ( {plan.name} {isCurrent ? : null} {new Intl.NumberFormat('en-US', { style: 'currency', currency: plan.currency }).format(plan.price)} /mo ); } interface PlanIconProps { name: PlanId; } function PlanIcon({ name }: PlanIconProps): React.JSX.Element | null { switch (name) { case 'startup': return ( ); case 'standard': return ( ); case 'business': return ( ); default: return null; } }