compass/app/home/page.tsx

@@ -2,7 +2,6 @@
 import Callout from "@/components/resource/Callout";
 import Card from "@/components/resource/Card";
 import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
-import { SearchResult } from "@/components/resource/SearchResult";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -14,7 +13,6 @@ export default function Page() {
                     Good evening!
                 </h1>
             </div>
-
             <LandingSearchBar />
         </div>
     );

compass/components/resource/LandingSearchBar.tsx

@@ -15,10 +15,7 @@ import React, {
     useEffect,
 } from "react";
 import Image from "next/image";
-import { SearchResult } from "./SearchResult";
+import { FilterBox } from "../FilterBox";
-
-// TODO: Actually implement search.
-import sampleResults from "./sample_results.json";
 
 export const LandingSearchBar: React.FC = () => {
     const [searchTerm, setSearchTerm] = useState("");
@@ -114,12 +111,7 @@ export const LandingSearchBar: React.FC = () => {
             </div>
 
             {/* search results, for now since it's empty this is the default screen  */}
-            <div
+            <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
-                className={
-                    "flex flex-col pt-16 space-y-2 justify-center items-center" +
-                    (searchTerm.length > 0 ? " hidden" : "")
-                }
-            >
                 <Image
                     alt="Landing illustration"
                     src="/landing_illustration.png"
@@ -131,22 +123,6 @@ export const LandingSearchBar: React.FC = () => {
                     results.
                 </p>
             </div>
-
-            <div
-                className={
-                    "p-1 flex flex-col gap-1 mt-2" +
-                    (searchTerm.length > 0 ? "" : " hidden")
-                }
-            >
-                {sampleResults.map((result, i) => (
-                    <SearchResult
-                        key={i}
-                        type={result.type}
-                        name={result.name}
-                        description={result.description}
-                    />
-                ))}
-            </div>
         </div>
     );
 };
@@ -171,7 +147,6 @@ const useFilterPillDropdown = (
     }, [ref, setShowDropdown]);
 };
 
-// Props for the filter pill...
 interface FilterPillProps {
     icon: React.ForwardRefExoticComponent<
         Omit<React.SVGProps<SVGSVGElement>, "ref">
@@ -183,7 +158,6 @@ interface FilterPillProps {
     setSelectedOptions: React.Dispatch<SetStateAction<boolean[]>>;
 }
 
-// The filter pill (visible when filter button active, contains dropdown)
 const FilterPill: React.FC<FilterPillProps> = ({
     icon,
     name,
@@ -218,7 +192,6 @@ const FilterPill: React.FC<FilterPillProps> = ({
 
     return (
         <div
-            ref={dropdownRef}
             className={
                 "border rounded-2xl w-max px-2 py-0.5 text-sm mr-2 relative " +
                 (isActive
@@ -249,6 +222,7 @@ const FilterPill: React.FC<FilterPillProps> = ({
 
             {/* The filter option selection dropdown */}
             <div
+                ref={dropdownRef}
                 className={
                     "absolute top-full mt-0.5 left-0 border border-gray-200 bg-white shadow-lg rounded-md p-1.5 w-48 " +
                     (showDropdown ? "flex flex-col" : "hidden")

compass/components/resource/SearchResult.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import {
-    BookmarkIcon,
-    ClipboardIcon,
-    QuestionMarkCircleIcon,
-    ArrowUturnRightIcon,
-} from "@heroicons/react/24/solid";
-
-interface SearchResultProps {
-    type: "resource" | "service" | string;
-    name: string;
-    description: string;
-}
-
-export const SearchResult: React.FC<SearchResultProps> = ({
-    type,
-    name,
-    description,
-}) => {
-    const Icon: React.ForwardRefExoticComponent<
-        Omit<React.SVGProps<SVGSVGElement>, "ref">
-    > =
-        type === "resource"
-            ? BookmarkIcon
-            : type === "service"
-            ? ClipboardIcon
-            : QuestionMarkCircleIcon; // Unknown type
-
-    return (
-        <div className="flex justify-between items-center w-full p-2 rounded-md hover:bg-purple-100 cursor-pointer group">
-            {/* Left side of the item */}
-            <div className="flex gap-2 items-center max-w-[95%]">
-                <Icon className="h-6 w-6 flex-shrink-0" />
-                <span className="font-medium flex-grow text-nowrap">
-                    {name}
-                </span>
-                <span className="text-gray-400 text-nowrap overflow-hidden text-ellipsis flex-shrink">
-                    {description}
-                </span>
-            </div>
-            <ArrowUturnRightIcon className="h-5 w-5 rotate-180 invisible group-hover:visible" />
-        </div>
-    );
-};

compass/components/resource/sample_results.json

@@ -1,32 +0,0 @@
-[
-	{
-		"type": "resource",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "service",
-		"name": "example name",
-		"description": "example description"
-	},
-	{
-		"type": "resource",
-		"name": "National Domestic Violence Hotline",
-		"description": "24/7 confidential support for victims of domestic violence"
-	},
-	{
-		"type": "resource",
-		"name": "Legal Aid Society",
-		"description": "Free legal assistance for low-income individuals"
-	},
-	{
-		"type": "service",
-		"name": "Crisis Hotline",
-		"description": "24/7 support for individuals in crisis"
-	},
-	{
-		"type": "unknown",
-		"name": "unknown thing with a really long name",
-		"description": "and let's also type out a really long description to see how it handles overflow and all that anyways"
-	}
-]