use alert

Author: dtemkin1

src/components/ScheduleOption.tsx

@@ -1,9 +1,10 @@
 import { useContext, useState } from "react";
 
-import { IconButton, Flex, Text, CloseButton } from "@chakra-ui/react";
+import { IconButton, Flex, CloseButton } from "@chakra-ui/react";
 
 import { LuArrowLeft, LuArrowRight } from "react-icons/lu";
 import { HydrantContext } from "../lib/hydrant";
+import { Alert } from "./ui/alert";
 
 export function ScheduleOption() {
   const [tooManyOptions, setTooManyOptions] = useState(true);
@@ -38,16 +39,20 @@ export function ScheduleOption() {
         </IconButton>
       </Flex>
       {tooManyOptions && totalOptions > 15 && (
-        <Flex align="center" bg="whiteAlpha.50" gap={1} px={2} py={1}>
-          <Text fontSize="sm">
-            Too many options? Use the "Edit sections" button above the class
-            description.
-          </Text>
-          <CloseButton
+        <Flex align="center" gap={1} px={2} py={1}>
+          <Alert
             size="sm"
-            onClick={() => {
-              setTooManyOptions(false);
-            }}
+            title='Too many options? Use the "Edit sections" button above the class description.'
+            colorPalette="gray"
+            endElement={
+              <CloseButton
+                size="sm"
+                height={"1rem"}
+                onClick={() => {
+                  setTooManyOptions(false);
+                }}
+              />
+            }
           />
         </Flex>
       )}

src/components/ui/alert.tsx

@@ -0,0 +1,30 @@
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+import { forwardRef, type ReactNode, type ReactElement } from "react";
+
+export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
+  startElement?: ReactNode;
+  endElement?: ReactNode;
+  title?: ReactNode;
+  icon?: ReactElement;
+}
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  function Alert(props, ref) {
+    const { title, children, icon, startElement, endElement, ...rest } = props;
+    return (
+      <ChakraAlert.Root ref={ref} {...rest}>
+        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+        {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>
+    );
+  },
+);