error for spot, also css fix for nav mobile

src/app/components/HeroSection.tsx

@@ -6,27 +6,35 @@ import { fetchSpotData } from '../../data/fetchSpotData';
 
 const HeroSection = ({ path, interviews, isError }) => {
   const [text, setText] = useState('');
-  const [saveData, setSaveData] = useState(false);
+  const [saveData, setSaveData] = useState(true);
   const [results, setResults] = useState(null);
   const [error, setError] = useState('');
+  const [validationError, setValidationError] = useState('');
 
   const handleInputChange = (event) => {
     setText(event.target.value);
+    if (validationError) setValidationError('');
   };
 
   const handleCheckboxChange = () => {
     setSaveData(!saveData);
   };
 
   const handleFindHelpClick = async () => {
+    if (text.length < 6) {
+      setValidationError(
+        'Please enter at least 6 characters to perform a search.'
+      );
+      return;
+    }
+
     try {
       const data = { text: text, save_data: saveData ? 1 : 0 };
       const fetchedResults = await fetchSpotData(data);
       setResults(fetchedResults);
       setError('');
       // Manage display of topic cards when spot search is used. dom manipulation is used to keep Page components server components
       const topicCards = document.querySelectorAll('.topic-card-parent');
-      console.log(topicCards);
       topicCards.forEach((card) => {
         card.classList.add('hidden');
       });
@@ -74,11 +82,13 @@ const HeroSection = ({ path, interviews, isError }) => {
                   Use my reply to help others
                 </label>
               </div>
-
               <Button onClick={handleFindHelpClick} className="hero-button">
                 Find help
               </Button>
             </div>
+            {validationError && (
+              <p className="text-danger">{validationError}</p>
+            )}
             {error && (
               <p className="text-danger">Error. Please try again later.</p>
             )}

src/app/components/SpotResultsContainer.tsx

@@ -20,7 +20,10 @@ const SpotResultsContainer = ({ data, interviews, path }) => {
       ...label,
       topic: legalTopics.find((t) => t.codes.includes(label.id)),
     }))
-    .filter(({ topic }) => topic) // Ensure the topic exists
+    .filter(
+      ({ topic }) =>
+        topic && interviews[topic.name] && interviews[topic.name].length > 0
+    ) // Ensure the topic exists and has available interviews
     .sort((a, b) => b.pred - a.pred) // Sort by confidence score
     .map(({ topic }) => topic); // Extract sorted topics
 

src/app/globals.css

@@ -167,6 +167,8 @@ footer {
 }
 
 .courtformsonline-navbar .nav-link {
+  padding: 1rem;
+  background-color: #002e60;
   color: white;
   margin-right: 2em;
 }