Redesign landing page (#44)

* Redesign landing page

A bit empty right now, functionality non-existent

* Create search bar and filter pills

Not tied to any functionality at the moment, however

* Implement search result component

Searching not yet added, sample results added for testing

* Move ref in FilterPill to allow closing by clicking pill

Clicking on the pill would reopen the dropdown; it closes properly now

compass/app/home/page.tsx

@@ -2,60 +2,20 @@
 import Callout from "@/components/resource/Callout";
 import Card from "@/components/resource/Card";
 import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
-import {
-    BookOpenIcon,
-    BookmarkIcon,
-    ClipboardIcon,
-} from "@heroicons/react/24/solid";
+import { SearchResult } from "@/components/resource/SearchResult";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Page() {
     return (
-        <div className="min-h-screen flex flex-col">
-            {/* icon + title  */}
-            <div className="pt-16 px-8 pb-4 flex-row">
-                <div className="mb-4 flex items-center space-x-4">
-                    <Image
-                        src="/logo.png"
-                        alt="Compass Center logo."
-                        width={25}
-                        height={25}
-                    />
-                    <h1 className="font-bold text-2xl text-purple-800">
-                        Compass Center Advocate Landing Page
-                    </h1>
-                </div>
-                <Callout>
-                    Welcome! Below you will find a list of resources for the
-                    Compass Center&apos;s trained advocates. These materials
-                    serve to virtually provide a collection of advocacy,
-                    resource, and hotline manuals and information.
-                    <b>
-                        {" "}
-                        If you are an advocate looking for the contact
-                        information of a particular Compass Center employee,
-                        please directly contact your staff back-up or the person
-                        in charge of your training.
-                    </b>
-                </Callout>
-            </div>
-            <div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
-                {/* link to different pages  */}
-                <div className="grid grid-cols-3 gap-6 pb-6">
-                    <Link href="/resource">
-                        <Card icon={<BookmarkIcon />} text="Resources" />
-                    </Link>
-                    <Link href="/service">
-                        <Card icon={<ClipboardIcon />} text="Services" />
-                    </Link>
-                    <Link href="/training-manual">
-                        <Card icon={<BookOpenIcon />} text="Training Manuals" />
-                    </Link>
-                </div>
-                {/* search bar */}
-                <LandingSearchBar />
+        <div className="min-h-screen flex flex-col items-center">
+            <div className="flex justify-center p-14">
+                <h1 className="font-bold text-4xl text-purple-800">
+                    Good evening!
+                </h1>
             </div>
+
+            <LandingSearchBar />
         </div>
     );
 }

compass/components/resource/LandingSearchBar.tsx

@@ -1,17 +1,41 @@
+import { FunnelIcon as FunnelIconOutline } from "@heroicons/react/24/outline";
 import {
+    ArchiveBoxIcon,
     ChevronDownIcon,
+    FunnelIcon,
     MagnifyingGlassIcon,
+    TagIcon,
     XMarkIcon,
 } from "@heroicons/react/24/solid";
-import React, { useState } from "react";
+import React, {
+    ReactNode,
+    SetStateAction,
+    useState,
+    useRef,
+    useEffect,
+} from "react";
 import Image from "next/image";
-import { FilterBox } from "../FilterBox";
+import { SearchResult } from "./SearchResult";
+
+// TODO: Actually implement search.
+import sampleResults from "./sample_results.json";
 
 export const LandingSearchBar: React.FC = () => {
     const [searchTerm, setSearchTerm] = useState("");
+    const [showFilters, setShowFilters] = useState(false);
     const [showFilterBox, setShowFilterBox] = useState(false);
     const toggleFilterBox = () => setShowFilterBox((prev) => !prev);
 
+    const collections = ["Resources", "Services"];
+    const [selectedCollections, setSelectedCollections] = useState(
+        new Array(collections.length).fill(false)
+    );
+
+    const tags = ["Food Relief", "Period Poverty", "Nutrition Education"];
+    const [selectedTags, setSelectedTags] = useState(
+        new Array(tags.length).fill(false)
+    );
+
     const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setSearchTerm(event.target.value);
     };
@@ -21,53 +45,235 @@ export const LandingSearchBar: React.FC = () => {
     };
 
     return (
-        <div className="max-w mx-auto">
+        <div className="w-9/12">
             {/* searchbar  */}
-            <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
-                <div className="flex-grow">
-                    <input
-                        className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
-                        type="text"
-                        placeholder="Search..."
-                        value={searchTerm}
-                        onChange={handleSearchChange}
-                    />
-                </div>
-                {/* input  */}
-                {searchTerm && (
-                    <button onClick={clearSearch}>
-                        <XMarkIcon
-                            className="h-5 w-5 text-gray-500"
-                            aria-hidden="true"
-                        />
+            <div className="flex items-center bg-white border border-gray-200 shadow rounded-md px-4 py-2">
+                {/* Left side: magnifying glass icon and input */}
+                <MagnifyingGlassIcon
+                    className="h-5 w-5 text-gray-500"
+                    aria-hidden="true"
+                />
+
+                <input
+                    className="sm:text-sm flex-grow text-gray-800 w-full px-3 rounded-md focus:outline-none"
+                    type="text"
+                    placeholder="Search…"
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                />
+
+                {/* Right side icons */}
+                <div className="flex gap-1">
+                    {/* If search bar is not empty, include clear icon */}
+                    {searchTerm && (
+                        <button
+                            onClick={clearSearch}
+                            className="hover:bg-purple-100 rounded-md p-1"
+                        >
+                            <XMarkIcon
+                                className="h-5 w-5 text-gray-500"
+                                aria-hidden="true"
+                            />
+                        </button>
+                    )}
+                    {/* Filter button */}
+                    <button
+                        className={
+                            "hover:bg-purple-100 rounded-md p-1 " +
+                            (showFilters ? "bg-purple-100" : "")
+                        }
+                        onClick={() => setShowFilters(!showFilters)}
+                    >
+                        {!showFilters && (
+                            <FunnelIconOutline className="h-5 w-5 text-gray-500" />
+                        )}
+                        {showFilters && (
+                            <FunnelIcon className="h-5 w-5 text-purple-800" />
+                        )}
                     </button>
-                )}
-                <div className="flex flex-row space-x-1 p-3">
-                    <span>
-                        <ChevronDownIcon
-                            className="h-5 w-5 text-gray-500"
-                            onClick={toggleFilterBox}
-                        />
-                    </span>
-                    {showFilterBox && <FilterBox className="relative top-50" />}
-                    <MagnifyingGlassIcon
-                        className="h-5 w-5 text-gray-500"
-                        aria-hidden="true"
-                    />
                 </div>
             </div>
+
+            {/* Search filters */}
+            <div className={"mt-2 flex " + (showFilters ? "" : "hidden")}>
+                <FilterPill
+                    icon={ArchiveBoxIcon}
+                    name="In"
+                    options={collections}
+                    selectedOptions={selectedCollections}
+                    setSelectedOptions={setSelectedCollections}
+                />
+                <FilterPill
+                    icon={TagIcon}
+                    name="Tags"
+                    options={tags}
+                    selectedOptions={selectedTags}
+                    setSelectedOptions={setSelectedTags}
+                    searchBar
+                />
+            </div>
+
             {/* search results, for now since it's empty this is the default screen  */}
-            <div className="flex flex-col pt-16 space-y-2 justify-center items-center">
+            <div
+                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"
                     width={250}
                     height={250}
                 />
-                <h2 className="font-medium text-medium text-gray-800">
-                    Need to find something? Use the links or the search bar
-                    above to get your results.
-                </h2>
+                <p className="font-medium text-medium text-gray-800">
+                    Need to find something? Use the search bar above to get your
+                    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>
+    );
+};
+
+// Closes the filter dropdown when the user clicks outside the dropdown.
+const useFilterPillDropdown = (
+    ref: React.RefObject<HTMLDivElement>,
+    setShowDropdown: Function
+) => {
+    // Close on outside click
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (ref.current && !ref.current.contains(event.target as Node)) {
+                if (setShowDropdown) setShowDropdown(false);
+            }
+        };
+
+        document.addEventListener("mousedown", handleClickOutside);
+        return () =>
+            // Unbind the event listener on cleanup.
+            document.removeEventListener("mousedown", handleClickOutside);
+    }, [ref, setShowDropdown]);
+};
+
+// Props for the filter pill...
+interface FilterPillProps {
+    icon: React.ForwardRefExoticComponent<
+        Omit<React.SVGProps<SVGSVGElement>, "ref">
+    >;
+    name: string;
+    searchBar?: boolean;
+    options: string[];
+    selectedOptions: boolean[];
+    setSelectedOptions: React.Dispatch<SetStateAction<boolean[]>>;
+}
+
+// The filter pill (visible when filter button active, contains dropdown)
+const FilterPill: React.FC<FilterPillProps> = ({
+    icon,
+    name,
+    options,
+    selectedOptions,
+    setSelectedOptions,
+    searchBar = false,
+}) => {
+    const Icon = icon;
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [isActive, setIsActive] = useState(false);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    const handleCheck = (
+        e: React.ChangeEvent<HTMLInputElement>,
+        item: string
+    ) => {
+        const selected = selectedOptions.map((o, i) => {
+            if (i == options.indexOf(item)) {
+                return e.target.checked;
+            } else {
+                return o;
+            }
+        });
+
+        setSelectedOptions(selected);
+        setIsActive(selected.includes(true));
+    };
+
+    // Closes dropdown when clicked outside
+    useFilterPillDropdown(dropdownRef, setShowDropdown);
+
+    return (
+        <div
+            ref={dropdownRef}
+            className={
+                "border rounded-2xl w-max px-2 py-0.5 text-sm mr-2 relative " +
+                (isActive
+                    ? "border-purple-800 text-purple-800 bg-purple-100"
+                    : "border-gray-400 text-gray-400 hover:bg-gray-100")
+            }
+        >
+            {/* The filter pill */}
+            <button
+                className="flex gap-1 items-center"
+                onClick={() => setShowDropdown(!showDropdown)}
+            >
+                <Icon className="h-4 w-4" />
+                <span className="max-w-36 overflow-hidden whitespace-nowrap text-ellipsis">
+                    {name}
+                    {/* Displaying the selected options */}
+                    {options.reduce(
+                        (a, b, i) =>
+                            a +
+                            (selectedOptions[i] // If selected, append option
+                                ? (a === "" ? ": " : ", ") + b // (prepend ": " if first element, ", " if not)
+                                : ""),
+                        ""
+                    )}
+                </span>
+                <ChevronDownIcon className="h-4 w-4" />
+            </button>
+
+            {/* The filter option selection dropdown */}
+            <div
+                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")
+                }
+            >
+                <input
+                    className="border w-full rounded-md mb-1 text-gray-600 p-1"
+                    type="text"
+                    placeholder={"Search " + name.toLowerCase()}
+                    hidden={!searchBar}
+                />
+                {options.map((item, index) => {
+                    return (
+                        <label className="text-gray-800" key={index}>
+                            <input
+                                type="checkbox"
+                                name="name"
+                                className="mr-1"
+                                checked={selectedOptions[index]}
+                                onChange={(e) => handleCheck(e, item)}
+                            />
+                            {item}
+                        </label>
+                    );
+                })}
             </div>
         </div>
     );

compass/components/resource/SearchResult.tsx

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,32 @@
+[
+	{
+		"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"
+	}
+]