rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-17 17:30:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Redesign landing page

Browse Source 
A bit empty right now, functionality non-existent
This commit is contained in:
Andy Chan 2024-10-25 12:35:45 -04:00
parent cb54c9829d
commit 0ae107ff1c
2 changed files with 56 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
compass/app/home/page.tsx
View File

@ -2,60 +2,18 @@
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 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>
);
}

86
compass/components/resource/LandingSearchBar.tsx
View File

@ -1,5 +1,6 @@
import { FunnelIcon as FunnelIconOutline } from "@heroicons/react/24/outline";
import {
ChevronDownIcon,
FunnelIcon,
MagnifyingGlassIcon,
XMarkIcon,
} from "@heroicons/react/24/solid";
@ -21,39 +22,52 @@ 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 " +
(showFilterBox ? "bg-purple-100" : "")
}
onClick={toggleFilterBox}
>
{!showFilterBox && (
<FunnelIconOutline className="h-5 w-5 text-gray-500" />
)}
{showFilterBox && (
<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 results, for now since it's empty this is the default screen */}
@ -64,10 +78,10 @@ export const LandingSearchBar: React.FC = () => {
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>
);