layouts and components, oh my!

2025-07-29 17:41:13 -04:00
parent d1ebd100b5
commit 3bdc768714
36 changed files with 919 additions and 129 deletions
@@ -0,0 +1,57 @@
+"use client";
+
+import classnames from 'classnames';
+import Button from '@/components/Button';
+
+import { MdLocationOn } from "react-icons/md";
+import LocationSearchInput from '@/components/LocationSearchInput';
+
+import { Schibsted_Grotesk } from 'next/font/google'
+const font = Schibsted_Grotesk({ subsets: ['latin'] })
+
+interface FindProviderProps {
+  zipOnly?: boolean;
+}
+
+const FindProvider: React.FC<FindProviderProps> = ({ zipOnly }) => {
+    
+  return (
+    <div className="flex z-1">
+        <div className="w-full flex flex-col px-4 py-3 border border-6 border-bluemana rounded-4xl">
+            <div className="w-full pb-2 flex justify-center text-2xl text-bronze font-semibold">
+                <p>Find A Provider By...</p>
+            </div>
+            <div className="w-full flex px-2">
+                <div className="w-full flex border-x-2 border-t-2 rounded-t-xl font-semibold divide-x-2 divide-bronze">
+                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tl-lg bg-bluetang text-platinum">
+                        Location
+                    </a>
+                    <a href="#" className="w-full h-9 flex justify-center items-center text-platinum hover:text-bronze">
+                        Procedure
+                    </a>
+                    <a href="#" className="w-full h-9 flex justify-center items-center rounded-tr-lg text-platinum hover:text-bronze">
+                        Provider/Facility
+                    </a>
+                </div>
+            </div>
+            <div className={classnames("w-full flex items-start px-2 pb-2 text-xl", font.className)}>
+                {/* <p className='pr-3'><GrMapLocation size={30} /></p> */}
+                <Button className="h-10 text-deepcove hover:text-atmosphere bg-platinum rounded-bl-xl">
+                    <MdLocationOn size={30} />
+                </Button>
+                <LocationSearchInput className="h-10 pl-3 text-bluemana border-y-2 border-platinum" />
+                <Button className="h-10 pr-3 pl-2 bg-platinum hover:bg-bluemana text-center text-deepcove font-semibold rounded-br-xl border-y-2 border-r-2 border-platinum">
+                    Search
+                </Button>
+            </div>
+            <div className="w-full flex justify-end text-platinum font-semibold">
+                <Button className="mr-2 underline hover:text-bronze">
+                    View Full Provider List
+                </Button>
+            </div>
+        </div>
+    </div>
+  );
+};
+
+export default FindProvider;