diff --git a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
index bb43a1de..01c59a9f 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
@@ -1,10 +1,18 @@
import React from "react";
-import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react";
+import {
+ Alert,
+ AlertIcon,
+ Box,
+ Text,
+ useColorModeValue,
+ VisuallyHidden,
+} from "@chakra-ui/react";
import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
import PaginationToolbar from "../components/PaginationToolbar";
import { useSearchResults } from "./useSearchResults";
import { MajorErrorMessage } from "../util";
+import { useAltStylesForSpecies } from "../loaders/alt-styles";
export const SEARCH_PER_PAGE = 30;
@@ -161,6 +169,7 @@ function SearchResults({
size="sm"
/>
+
{items.map((item, index) => (
+
+
+ {message}
+
+
+ );
+}
+
+function getSearchNCStylesMessage(query, altStyles) {
+ const seriesMainNames = [
+ ...new Set((altStyles ?? []).map((as) => as.seriesMainName)),
+ ];
+ const queryWords = query.value.toLowerCase().split(/\s+/);
+
+ if (queryWords.includes("token")) {
+ return (
+ <>
+ If you're looking for NC Styles, check the emotion picker below the pet
+ preview!
+ >
+ );
+ }
+
+ // NOTE: This won't work on multi-word series names, of which there are
+ // currently none.
+ const seriesWord = seriesMainNames.find((n) =>
+ queryWords.includes(n.toLowerCase()),
+ );
+ if (seriesWord != null) {
+ return (
+ <>
+ If you're looking for NC Styles, check the emotion picker below the pet
+ preview!
+ >
+ );
+ }
+}
+
/**
* serializeQuery stably converts a search query object to a string, for easier
* JS comparison.