|
1 | | -import type { ReactNode } from "react" |
2 | | -import { cx, useStyles } from "../styles/use-styles.js" |
3 | | -import { Icon } from "./icon/Icon.js" |
4 | | - |
5 | | -type RouteColor = "green" | "blue" | "teal" | "red" | "purple" |
6 | | - |
7 | | -interface RouteSegmentHeaderProps { |
8 | | - icon: "Root" | "Layout" | "CornerDownRight" |
9 | | - color: RouteColor |
10 | | - title: string |
11 | | - subtitle?: string |
12 | | - rightContent?: ReactNode |
13 | | -} |
14 | | - |
15 | | -const RouteSegmentHeader = ({ icon, color, title, subtitle, rightContent }: RouteSegmentHeaderProps) => { |
16 | | - const { styles } = useStyles() |
17 | | - |
18 | | - return ( |
19 | | - <div className={styles.routeSegmentCard.header}> |
20 | | - <div |
21 | | - className={cx( |
22 | | - styles.routeSegmentCard.icon, |
23 | | - styles.routeSegmentCard[ |
24 | | - `icon${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof styles.routeSegmentCard |
25 | | - ] |
26 | | - )} |
27 | | - > |
28 | | - <Icon name={icon} size="sm" /> |
29 | | - </div> |
30 | | - <h2 className={styles.routeSegmentCard.title}> |
31 | | - {title} |
32 | | - {subtitle && <span className={styles.routeSegmentCard.subtitle}> ({subtitle})</span>} |
33 | | - </h2> |
34 | | - {rightContent && <div className={styles.routeSegmentCard.headerActions}>{rightContent}</div>} |
35 | | - </div> |
36 | | - ) |
37 | | -} |
38 | | - |
39 | | -export { RouteSegmentHeader } |
40 | | -export type { RouteColor } |
| 1 | +import type { ReactNode } from "react" |
| 2 | +import { cx, useStyles } from "../styles/use-styles.js" |
| 3 | +import { Icon } from "./icon/Icon.js" |
| 4 | + |
| 5 | +type RouteColor = "green" | "blue" | "teal" | "red" | "purple" |
| 6 | + |
| 7 | +interface RouteSegmentHeaderProps { |
| 8 | + icon: "Root" | "Layout" | "CornerDownRight" |
| 9 | + color: RouteColor |
| 10 | + title: string |
| 11 | + subtitle?: string |
| 12 | + rightContent?: ReactNode |
| 13 | +} |
| 14 | + |
| 15 | +const RouteSegmentHeader = ({ icon, color, title, subtitle, rightContent }: RouteSegmentHeaderProps) => { |
| 16 | + const { styles } = useStyles() |
| 17 | + |
| 18 | + return ( |
| 19 | + <div className={styles.routeSegmentCard.header}> |
| 20 | + <div |
| 21 | + className={cx( |
| 22 | + styles.routeSegmentCard.icon, |
| 23 | + styles.routeSegmentCard[ |
| 24 | + `icon${color.charAt(0).toUpperCase() + color.slice(1)}` as keyof typeof styles.routeSegmentCard |
| 25 | + ] |
| 26 | + )} |
| 27 | + > |
| 28 | + <Icon name={icon} size="sm" /> |
| 29 | + </div> |
| 30 | + <h2 className={styles.routeSegmentCard.title}> |
| 31 | + {title} |
| 32 | + {subtitle && <span className={styles.routeSegmentCard.subtitle}> ({subtitle})</span>} |
| 33 | + </h2> |
| 34 | + {rightContent && <div className={styles.routeSegmentCard.headerActions}>{rightContent}</div>} |
| 35 | + </div> |
| 36 | + ) |
| 37 | +} |
| 38 | + |
| 39 | +export { RouteSegmentHeader } |
| 40 | +export type { RouteColor } |
0 commit comments