john-okeefe
4574dfb8f1
- Replace extendTheme/ColorModeScript with createSystem Provider + Toaster shims (components/ui, provider, color-mode) and next-themes; index.tsx renders Provider, App reads useColorMode from the shim and clears both chakra and legacy theme storage keys on preference change - theme.tsx restores the v2 identity on v3 primitives: v2 gray/blue/ green/red scales, v2 solid/contrast fills, v2 text-per-size for button/input/native-select/tag, v2 input heights, v2 heading scale (xl->4xl etc), v2 switch track/thumb, brighter link underlines (currentColor/60), +1px tag top padding, 17px body base font - Default new-user theme light -> dark to match the established dark UI - App.test rewritten around Provider + MemoryRouter + Home (old CRA 'learn react' assertion no longer applies)
30 lines
970 B
TypeScript
30 lines
970 B
TypeScript
import { Alert as ChakraAlert } from "@chakra-ui/react"
|
|
import * as React from "react"
|
|
|
|
export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
|
|
startElement?: React.ReactNode
|
|
endElement?: React.ReactNode
|
|
title?: React.ReactNode
|
|
icon?: React.ReactElement
|
|
}
|
|
|
|
export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
|
|
function Alert(props, ref) {
|
|
const { title, children, icon, startElement, endElement, ...rest } = props
|
|
return (
|
|
<ChakraAlert.Root ref={ref} {...rest}>
|
|
{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
|
|
{children ? (
|
|
<ChakraAlert.Content>
|
|
<ChakraAlert.Title>{title}</ChakraAlert.Title>
|
|
<ChakraAlert.Description>{children}</ChakraAlert.Description>
|
|
</ChakraAlert.Content>
|
|
) : (
|
|
<ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
|
|
)}
|
|
{endElement}
|
|
</ChakraAlert.Root>
|
|
)
|
|
},
|
|
)
|