rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-20 18:40: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

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

@ -2,60 +2,18 @@
import Callout from "@/components/resource/Callout"; import Callout from "@/components/resource/Callout";
import Card from "@/components/resource/Card"; import Card from "@/components/resource/Card";
import { LandingSearchBar } from "@/components/resource/LandingSearchBar"; import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
import {
BookOpenIcon,
BookmarkIcon,
ClipboardIcon,
} from "@heroicons/react/24/solid";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
export default function Page() { export default function Page() {
return ( return (
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col items-center">
{/* icon + title */} <div className="flex justify-center p-14">
<div className="pt-16 px-8 pb-4 flex-row"> <h1 className="font-bold text-4xl text-purple-800">
<div className="mb-4 flex items-center space-x-4"> Good evening!
<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> </h1>
</div> </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 /> <LandingSearchBar />
</div> </div>
</div>
); );
} }

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

@ -1,5 +1,6 @@
import { FunnelIcon as FunnelIconOutline } from "@heroicons/react/24/outline";
import { import {
ChevronDownIcon, FunnelIcon,
MagnifyingGlassIcon, MagnifyingGlassIcon,
XMarkIcon, XMarkIcon,
} from "@heroicons/react/24/solid"; } from "@heroicons/react/24/solid";
@ -21,39 +22,52 @@ export const LandingSearchBar: React.FC = () => {
}; };
return ( return (
<div className="max-w mx-auto"> <div className="w-9/12">
{/* searchbar */} {/* searchbar */}
<div className="flex items-center bg-white border border-gray-200 shadow rounded-md"> <div className="flex items-center bg-white border border-gray-200 shadow rounded-md px-4 py-2">
<div className="flex-grow"> {/* Left side: magnifying glass icon and input */}
<MagnifyingGlassIcon
className="h-5 w-5 text-gray-500"
aria-hidden="true"
/>
<input <input
className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none" className="sm:text-sm flex-grow text-gray-800 w-full px-3 rounded-md focus:outline-none"
type="text" type="text"
placeholder="Search..." placeholder="Search…"
value={searchTerm} value={searchTerm}
onChange={handleSearchChange} onChange={handleSearchChange}
/> />
</div>
{/* input */} {/* Right side icons */}
<div className="flex gap-1">
{/* If search bar is not empty, include clear icon */}
{searchTerm && ( {searchTerm && (
<button onClick={clearSearch}> <button
onClick={clearSearch}
className="hover:bg-purple-100 rounded-md p-1"
>
<XMarkIcon <XMarkIcon
className="h-5 w-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
)} )}
<div className="flex flex-row space-x-1 p-3"> {/* Filter button */}
<span> <button
<ChevronDownIcon className={
className="h-5 w-5 text-gray-500" "hover:bg-purple-100 rounded-md p-1 " +
(showFilterBox ? "bg-purple-100" : "")
}
onClick={toggleFilterBox} onClick={toggleFilterBox}
/> >
</span> {!showFilterBox && (
{showFilterBox && <FilterBox className="relative top-50" />} <FunnelIconOutline className="h-5 w-5 text-gray-500" />
<MagnifyingGlassIcon )}
className="h-5 w-5 text-gray-500" {showFilterBox && (
aria-hidden="true" <FunnelIcon className="h-5 w-5 text-purple-800" />
/> )}
</button>
</div> </div>
</div> </div>
{/* search results, for now since it's empty this is the default screen */} {/* search results, for now since it's empty this is the default screen */}
@ -64,10 +78,10 @@ export const LandingSearchBar: React.FC = () => {
width={250} width={250}
height={250} height={250}
/> />
<h2 className="font-medium text-medium text-gray-800"> <p className="font-medium text-medium text-gray-800">
Need to find something? Use the links or the search bar Need to find something? Use the search bar above to get your
above to get your results. results.
</h2> </p>
</div> </div>
</div> </div>
); );