Styles, API calls, and more

src/components/ToastError.tsx

@@ -0,0 +1,16 @@
+import { Stack, Text } from '@mantine/core';
+import { stackClasses } from '../styles';
+
+export function ToastError({ err }: { err: any }) {
+	const errorResponse = JSON.parse(err.message);
+	return (
+		<Stack className={stackClasses.VStack} style={{ alignItems: 'flex-start' }}>
+			<Text>
+				Status: {errorResponse.status} {errorResponse.statusText}
+			</Text>
+			<Text>Details: {errorResponse.msg}</Text>
+			{errorResponse.loc && <Text>Location: {errorResponse.loc}</Text>}
+			{errorResponse.type && <Text>Type: {errorResponse.type}</Text>}
+		</Stack>
+	);
+}