mvp for ui

LMacPhail · Nov 1, 2023 · 9545c3c · 9545c3c
1 parent 9d7227c
commit 9545c3c
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 29 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,14 +1,17 @@
 import React from "react";
 import "./App.css";
 import { Header } from "./components/Header";
-import { FilterSidebar } from "./components/FilterSidebar";
+import { Sidebar } from "./components/Sidebar";
 import Main from "./components/Main";
+import { Filters } from "./components/filters/Filters";
 
 function App() {
   return (
     <div className="">
       <Header />
-      <FilterSidebar />
+      <Sidebar>
+        <Filters />
+      </Sidebar>
       <Main />
     </div>
   );

diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -15,15 +15,17 @@ export const Accordion: React.FC<{ mps: MP[] }> = ({ mps }) => {
             />
             <label
               htmlFor={`accordion-${i}`}
-              className="accordion-title bg-gray-50 dark:bg-slate-900"
+              className="accordion-title bg-gray-50 dark:bg-slate-900 px-4"
             >
-              <span className="mx-4">{mp.name}</span>
-              {/* <ProfileHeader name={mp.name} socials={mp.socialMedia} /> */}
+              <ProfileHeader
+                name={mp.name}
+                constituency={mp.constituency}
+                socials={mp.socialMedia}
+              />
             </label>
             <div className="accordion-content">
-              <div className="min-h-0">
-                {mp.biography}
-                {/* <ProfileContent bio={mp.biography} /> */}
+              <div className="min-h-0 px-6 border-l-2 border-slate-400">
+                <ProfileContent bio={mp.biography} />
               </div>
             </div>
           </div>

diff --git a/src/components/Filters.tsx b/src/components/Filters.tsx
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -2,12 +2,12 @@ import React from "react";
 
 export const Header: React.FC = () => {
   return (
-    <header className="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 sm:py-4 lg:pl-64 dark:bg-gray-800 dark:border-gray-700">
+    <header className="sticky top-0 inset-x-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-[48] w-full bg-white border-b text-sm py-2.5 sm:py-4 md:pl-72 dark:bg-gray-800 dark:border-gray-700">
       <nav
         className="flex basis-full items-center w-full mx-auto px-4 sm:px-6 md:px-8"
         aria-label="Global"
       >
-        <div className="mr-5 lg:mr-0 lg:hidden">
+        <div className="mr-5 md:mr-0 md:hidden">
           <a
             className="flex-none text-xl font-semibold dark:text-white"
             href="#"

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -6,7 +6,7 @@ import { values } from "../data/test/rawResponse";
 const Main: React.FC = () => {
   const mps = formatResponse(values);
   return (
-    <div className="w-full pt-10 px-4 sm:px-6 md:px-8 lg:pl-72">
+    <div className="w-full pt-10 px-4 sm:px-6 md:px-8 md:pl-80">
       <Accordion mps={mps} />
     </div>
   );

diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
@@ -3,11 +3,31 @@ import { SocialMediaLinks } from "../data/types";
 
 export const ProfileHeader: React.FC<{
   name: string;
+  constituency: string;
   socials: SocialMediaLinks;
-}> = ({ name, socials }) => {
-  return <span>{name}</span>;
+}> = ({ name, constituency, socials }) => {
+  return (
+    <div className="flex flex-row justify-between">
+      <div>
+        <h2 className="font-bold">{name}</h2>
+        <span>
+          <p className="font-light text-sm italic">{constituency}</p>
+        </span>
+      </div>
+      <span className="font-extralight text-sm italic">
+        (social media links go here)
+      </span>
+    </div>
+  );
 };
 
 export const ProfileContent: React.FC<{ bio: string }> = ({ bio }) => {
-  return <p>{bio}</p>;
+  return (
+    <>
+      <p>{bio}</p>
+      <p className="pt-12 font-light italic">
+        (things like profession and organisation links go here)
+      </p>
+    </>
+  );
 };
diff --git a/src/components/FilterSidebar.tsx → src/components/Sidebar.tsx b/src/components/FilterSidebar.tsx → src/components/Sidebar.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { ProjectTitle } from "./ProjectTitle";
-import { Filters } from "./Filters";
+import { Filters } from "./filters/Filters";
 
-export const FilterSidebar: React.FC<{}> = ({}) => {
+export const Sidebar: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   return (
     <>
       <input type="checkbox" id="drawer-left" className="drawer-toggle" />
@@ -30,24 +32,21 @@ export const FilterSidebar: React.FC<{}> = ({}) => {
       </div>
       <label className="overlay" htmlFor="drawer-left"></label>
       <div className="drawer bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700">
-        <div className="drawer-content flex flex-col h-full top-0 left-0 bottom-0 z-[60] w-64  pt-7 pb-10 overflow-y-auto scrollbar-y ">
+        <div className="drawer-content flex flex-col h-full top-0 left-0 bottom-0 z-[60] w-72 pt-7 pb-10 overflow-y-auto scrollbar-y ">
           <label
             htmlFor="drawer-left"
             className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
           >
             ✕
           </label>
-          <div className="px-6">
-            <ProjectTitle />
-          </div>
-          <Filters />
+          {children}
         </div>
       </div>
       <div
         id="application-sidebar"
-        className={`hidden fixed top-0 left-0 bottom-0 z-[60] w-64 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto scrollbar-y lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:scrollbar-y dark:bg-gray-800 dark:border-gray-700`}
+        className={`hidden fixed top-0 left-0 bottom-0 z-[60] w-72 bg-white border-r border-gray-200 pt-7 pb-10 overflow-y-auto scrollbar-y md:block md:translate-x-0 md:right-auto md:bottom-0 dark:scrollbar-y dark:bg-gray-800 dark:border-gray-700`}
       >
-        <Filters />
+        {children}
       </div>
     </>
   );

diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { ProjectTitle } from "../ProjectTitle";
+import { PolicyStance } from "./PolicyStance";
+
+export const Filters: React.FC = () => {
+  return (
+    <>
+      <div className="px-6">
+        <ProjectTitle />
+        <PolicyStance />
+      </div>
+    </>
+  );
+};
diff --git a/src/components/filters/PolicyStance.tsx b/src/components/filters/PolicyStance.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+const categories: string[] = [
+  "climate",
+  "migration",
+  "LGBTQ",
+  "workers",
+  "nhs",
+  "benefits",
+  "strikes",
+  "public ownership",
+];
+
+export const PolicyStance: React.FC = () => {
+  return (
+    <div className="my-4">
+      <h3 className="w-full my-4 text-center font-bold text-lg">
+        Stance on policy
+      </h3>
+      <div className="flex flex-row justify-between mx-2">
+        <span>Negative</span>
+        <span>Positive</span>
+      </div>
+      {categories.map((category) => (
+        <PositiveNegativeChoice category={category} />
+      ))}
+    </div>
+  );
+};
+
+const PositiveNegativeChoice: React.FC<{
+  category: string;
+  positive?: boolean;
+}> = ({ category, positive }) => {
+  const negative = positive !== undefined && !positive;
+  return (
+    <div className="flex flex-row justify-between m-3">
+      <input
+        type="checkbox"
+        className="checkbox checkbox-bordered-error"
+        checked={negative}
+      />
+      <p className="flex align-middle text-center">{category}</p>
+      <input
+        type="checkbox"
+        className="checkbox checkbox-bordered-success"
+        checked={positive}
+      />
+    </div>
+  );
+};