From c4dadd18bceced39b070e4de6a725fcdb1271049 Mon Sep 17 00:00:00 2001
From: Meliora Ho <nho10@fordham.edu>
Date: Sat, 23 Mar 2024 02:14:58 +0000
Subject: [PATCH] Searchbar, Callout, Card, Layout

---
 compass/app/resource/page.tsx                 | 39 ++++++++++++++++++
 compass/components/resource/Callout.tsx       | 15 +++++++
 compass/components/resource/Card.tsx          | 20 +++++++++
 .../components/resource/LandingSearchBar.tsx  | 41 +++++++++++++++++++
 4 files changed, 115 insertions(+)
 create mode 100644 compass/app/resource/page.tsx
 create mode 100644 compass/components/resource/Callout.tsx
 create mode 100644 compass/components/resource/Card.tsx
 create mode 100644 compass/components/resource/LandingSearchBar.tsx

diff --git a/compass/app/resource/page.tsx b/compass/app/resource/page.tsx
new file mode 100644
index 0000000..bee0a60
--- /dev/null
+++ b/compass/app/resource/page.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import Callout from "@/components/resource/Callout";
+import Card from "@/components/resource/Card";
+import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
+import { Icons } from "@/utils/constants";
+import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
+import Image from 'next/image';
+
+export default function Page() {
+    return (
+        <>
+        <div className="pt-16 px-8 pb-8">
+            <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'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 min-h-screen border-t border-gray-200 bg-gray-50">
+            <div className="grid grid-cols-3 gap-6  pb-6">
+            <Card icon={<BookmarkIcon />} text="Resources" />
+            <Card icon={<ClipboardIcon />} text="Services" />
+            <Card icon={<BookOpenIcon />} text="Training Manuals" />
+            </div>
+                
+                <LandingSearchBar />
+            </div>
+            </>
+    )
+}
\ No newline at end of file
diff --git a/compass/components/resource/Callout.tsx b/compass/components/resource/Callout.tsx
new file mode 100644
index 0000000..fe2e329
--- /dev/null
+++ b/compass/components/resource/Callout.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface CalloutProps {
+  children: ReactNode;
+}
+
+const Callout = ({ children }: CalloutProps) => {
+  return (
+    <div className="p-4 mb-4 flex items-center border-gray-300 bg-gray-100 rounded-lg">
+      <span className="text-sm text-gray-700">{children}</span>
+    </div>
+  );
+};
+
+export default Callout;
\ No newline at end of file
diff --git a/compass/components/resource/Card.tsx b/compass/components/resource/Card.tsx
new file mode 100644
index 0000000..a9202ac
--- /dev/null
+++ b/compass/components/resource/Card.tsx
@@ -0,0 +1,20 @@
+import React, {ReactNode} from "react";
+
+
+interface TagProps {
+  text: string;
+  icon: React.ReactNode;
+}
+
+const Card: React.FC<TagProps> = ({ text, icon }) => {
+  return (
+    <div className="flex flex-row space-x-2 items-start justify-start border border-gray-200 bg-white shadow rounded-md p-4">
+      <span className="h-5 w-5 text-gray-700">
+        {icon}
+      </span>
+      <span className="text-sm font-semibold text-gray-700">{text}</span>
+    </div>
+  );
+};
+
+export default Card;
\ No newline at end of file
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
new file mode 100644
index 0000000..0a4f637
--- /dev/null
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -0,0 +1,41 @@
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
+import React, { useState } from 'react';
+
+export const LandingSearchBar: React.FC = () => {
+    const [searchTerm, setSearchTerm] = useState('');
+  
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchTerm(event.target.value);
+    };
+  
+    const clearSearch = () => {
+      setSearchTerm('');
+    };
+  
+    return (
+      <div className="max-w mx-auto">
+        <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
+          <div className="flex-grow">
+            <input
+              className="sm:text-sm w-full px-6 py-3 rounded-md focus:outline-none"
+              type="text"
+              placeholder="Search..."
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
+          </div>
+          {searchTerm && (
+            <button
+              onClick={clearSearch}
+            >
+              <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+            </button>
+          )}
+          <div className="p-3">
+            <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
+          </div>
+        </div>
+        
+      </div>
+    );
+  };