Allow for ultrawide-specific tips

Author: codetheweb

src/components/basket/index.tsx

@@ -49,7 +49,7 @@ const Basket = observer(() => {
 	const isUltrawide = useBreakpointValue({base: false, '4xl': true});
 	const wasPreviouslyUltrawide = usePrevious(isUltrawide);
 
-	const onShowBasketTip = useTip('Tap the floating bar at the bottom, then \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.');
+	const onShowBasketTip = useTip('Tap the floating bar at the bottom, then \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.', 'Tap \'Create a new basket\' to enable the add-to-basket buttons on courses and sections.');
 
 	useTimeout(() => {
 		if (allBasketsState.baskets.length === 0) {

src/lib/hooks/use-tip.ts

@@ -1,26 +1,27 @@
 import {useCallback} from 'react';
-import {useToast} from '@chakra-ui/react';
-import useLocalStorage from 'react-use/lib/useLocalStorage';
+import {useToast, useBreakpointValue} from '@chakra-ui/react';
+import {useLocalStorage} from 'react-use';
 
-const useTip = (tip: string) => {
+const useTip = (tip: string, tipSpecificToUltrawides?: string) => {
+	const resolvedTip = useBreakpointValue({base: tip, '4xl': tipSpecificToUltrawides ?? tip}) ?? tip;
 	const isServer = typeof window === 'undefined';
 
 	const toast = useToast();
-	const [hasShown, setHasShown] = useLocalStorage(isServer ? '' : btoa(tip), false);
+	const [hasShown, setHasShown] = useLocalStorage(isServer ? '' : btoa(resolvedTip), false);
 
 	const onShowTip = useCallback(() => {
 		if (!hasShown) {
 			toast({
 				title: '✨ tip:',
 				status: 'info',
-				description: tip,
+				description: resolvedTip,
 				isClosable: true,
 				duration: 10_000,
 				position: 'bottom-right',
 			});
 			setHasShown(true);
 		}
-	}, [hasShown, setHasShown, toast, tip]);
+	}, [hasShown, setHasShown, toast, resolvedTip]);
 
 	return onShowTip;
 };