adds search

apps/hub-app/src/Routes.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { Routes as RoutesDom, Route } from 'react-router-dom';
 
 import HomePage from './pages/HomePage';
+import PublicProfilePage from './pages/PublicProfilePage';
 
 const Routes = () => {
   return (
     <RoutesDom>
       <Route path="/" element={<HomePage />} />
-      <Route path="/dashboard" element={<HomePage />} />
-      <Route path="/explore" element={<HomePage />} />
+      <Route path="profile/:address" element={<PublicProfilePage />} />
     </RoutesDom>
   );
 };

apps/hub-app/src/components/BodyNav.tsx

@@ -79,17 +79,12 @@ const NavLink = ({ children, path, selected }: NavLinkProps) => {
 export const BodyNav = () => {
   const match = useMatch('/explore');
   const isHome = !match;
-  // const isExplore = !!match;
   return (
     <BodyNavContainer>
       <NavLink path="/" selected={isHome}>
         <StyledHamburgerMenu />
         Home
       </NavLink>
-      {/* <NavLink path="/explore" selected={isExplore}>
-        <StyledHamburgerMenu />
-        Explore
-      </NavLink> */}
     </BodyNavContainer>
   );
 };

apps/hub-app/src/components/HomeDashboard.tsx

@@ -1,11 +1,12 @@
+import { MouseEvent, useState, ChangeEvent } from 'react';
 import { ITransformedMembership } from '@daohaus/dao-data';
 import { ParMd, Spinner, useBreakpoint, widthQuery } from '@daohaus/ui';
-import { MouseEvent, useState } from 'react';
 import styled from 'styled-components';
-import { ListType } from '../utils/appSpecificTypes';
+
 import { DaoCards } from './DaoCards';
 import { DaoTable } from './DaoTable';
 import TableControl from './TableControl';
+import { ListType } from '../utils/appSpecificTypes';
 
 // Refactored this to be a component that we might be able to reuse
 // for explore view and other similar views.
@@ -22,6 +23,8 @@ type DashProps = {
   toggleDelegateFilter: (event: MouseEvent<HTMLButtonElement>) => void;
   sortBy: string;
   toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
   loading: boolean;
 };
 
@@ -33,6 +36,8 @@ export const HomeDashboard = ({
   toggleDelegateFilter,
   sortBy,
   toggleSortBy,
+  searchTerm,
+  setSearchTerm,
   loading,
 }: DashProps) => {
   const [listType, setListType] = useState<ListType>('cards');
@@ -76,6 +81,8 @@ export const HomeDashboard = ({
           toggleDelegateFilter={toggleDelegateFilter}
           sortBy={sortBy}
           toggleSortBy={toggleSortBy}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
         />
         <NoDaosFound />
       </Body>
@@ -93,6 +100,8 @@ export const HomeDashboard = ({
         toggleDelegateFilter={toggleDelegateFilter}
         sortBy={sortBy}
         toggleSortBy={toggleSortBy}
+        searchTerm={searchTerm}
+        setSearchTerm={setSearchTerm}
       />
       {isMobile ? (
         <Mobile daoData={daoData} />

apps/hub-app/src/components/Layout.tsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { breakpoints } from '@daohaus/ui';
+import { indigoDark } from '@radix-ui/colors';
+
+export const Layout = styled.div`
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  min-width: 100%;
+  overflow-x: hidden;
+  // REVIEW
+  // SWITCH TO SCROLL WHEN NEEDED
+  // WAS CAUSING DOUBLE SCROLL BARS
+  overflow-y: auto;
+  gap: 0rem 0rem;
+  display: grid;
+
+  grid-template:
+    'sidebarTopLeft header sidebarTopRight' 9.6rem
+    'sidebarProfileLeft profile sidebarProfileRight' minmax(auto, 9.6rem)
+    'sidebar body aside' 1fr / 1fr minmax(auto, 35rem) 1fr;
+
+  @media (min-width: ${breakpoints.xs}) {
+    grid-template:
+      'sidebarTopLeft header sidebarTopRight' 9.6rem
+      'sidebarProfileLeft profile sidebarProfileRight' minmax(auto, 9.6rem)
+      'sidebar body aside' 1fr / minmax(2.6rem, 1fr) minmax(auto, 120rem) minmax(2.6rem, 1fr);
+  }
+`;
+
+export const SideTopLeft = styled.div`
+  grid-area: sidebarTopLeft;
+  width: 100%;
+`;
+
+export const SideTopRight = styled.div`
+  grid-area: sidebarTopRight;
+  width: 100%;
+`;
+
+export const SideProfileLeft = styled.div`
+  grid-area: sidebarProfileLeft;
+  width: 100%;
+  background: ${indigoDark.indigo2};
+  border-bottom: 1px solid ${indigoDark.indigo5};
+`;
+
+export const SideProfileRight = styled.div`
+  grid-area: sidebarProfileRight;
+  width: 100%;
+  background: ${indigoDark.indigo2};
+  border-bottom: 1px solid ${indigoDark.indigo5};
+`;

apps/hub-app/src/components/Profile.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useHausConnect } from '@daohaus/daohaus-connect-feature';
 import styled from 'styled-components';
-import { breakpoints, H5, ParLg, ParMd, Dropdown } from '@daohaus/ui';
+import { breakpoints, H5, ParLg, ParMd, Dropdown, Bold } from '@daohaus/ui';
 import { Avatar, Button, Link as ExternalLink } from '@daohaus/ui';
 import { indigoDark } from '@radix-ui/colors';
 import { SELF_ID_URL } from '../constants';
@@ -88,7 +88,7 @@ const StyledLink = styled(Link)`
 `;
 
 export const HeaderProfile = () => {
-  const { profile } = useHausConnect();
+  const { profile, address } = useHausConnect();
   return (
     <ProfileContainer>
       <StyledAvatar src={profile?.image || ''} size="lg" alt="profile image" />
@@ -117,7 +117,7 @@ export const HeaderProfile = () => {
           {
             type: 'clickable',
             content: (
-              <StyledLink to="/">
+              <StyledLink to={`/profile/${address}`}>
                 <StyledParMd>View Public</StyledParMd>
               </StyledLink>
             ),
@@ -127,3 +127,71 @@ export const HeaderProfile = () => {
     </ProfileContainer>
   );
 };
+
+const AvatarLarge = styled(Avatar)`
+  height: 12rem;
+  width: 12rem;
+`;
+
+const PContainer = styled.div`
+  display: flex;
+  gap: 1.2rem;
+  flex-direction: column;
+  background: ${indigoDark.indigo5};
+  margin: 1.8rem;
+  padding: 2.8rem;
+  min-height: 30rem;
+  border-radius: 0.8rem;
+  border: 0.1rem solid ${indigoDark.indigo5};
+`;
+
+const ProfileNameContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+`;
+
+const ProfileMetadataContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+
+  @media (min-width: ${breakpoints.xs}) {
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Profile = () => {
+  const { profile } = useHausConnect();
+  return (
+    <PContainer>
+      <ProfileMetadataContainer>
+        <AvatarLarge src={profile?.image || ''} size="lg" alt="profile image" />
+        <Container>
+          <ProfileNameContainer>
+            {profile?.name && <H5>{profile?.name || ''}</H5>}
+            {profile?.emoji && (
+              <ParLg as="span" role="img" aria-label="profile emoji">
+                {profile?.emoji || ''}
+              </ParLg>
+            )}
+          </ProfileNameContainer>
+          {profile?.ens && (
+            <ParMd as="span">
+              <Bold>{profile?.ens}</Bold>
+            </ParMd>
+          )}
+        </Container>
+      </ProfileMetadataContainer>
+      {profile?.description && <ParMd as="span">{profile?.description}</ParMd>}
+    </PContainer>
+  );
+};

apps/hub-app/src/components/ProfileArea.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { indigoDark } from '@radix-ui/colors';
+import { BodyNav } from '../components/BodyNav';
+import { HeaderProfile } from '../components/Profile';
+import { useHausConnect } from '@daohaus/daohaus-connect-feature';
+
+const ProfileContainer = styled.div`
+  grid-area: profile;
+  display: flex;
+  gap: 2.6rem;
+  background: ${indigoDark.indigo2};
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2rem;
+`;
+
+const ProfileArea = () => {
+  const { isProfileLoading, isConnected } = useHausConnect();
+  return (
+    <ProfileContainer>
+      <BodyNav />
+      {isConnected && !isProfileLoading && <HeaderProfile />}
+    </ProfileContainer>
+  );
+};
+
+export default ProfileArea;

apps/hub-app/src/components/SearchInput.tsx

@@ -0,0 +1,43 @@
+import { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { indigoDark } from '@radix-ui/colors';
+import { BiSearch } from 'react-icons/bi';
+import { Input } from '@daohaus/ui';
+
+const StyledInput = styled(Input)`
+  background: ${indigoDark.indigo3};
+  color: ${indigoDark.indigo11};
+  ::placeholder {
+    color: ${indigoDark.indigo11};
+  }
+  :focus {
+    background: ${indigoDark.indigo3};
+    color: ${indigoDark.indigo11};
+  }
+`;
+
+const IconSearch = styled(BiSearch)`
+  fill: ${indigoDark.indigo11};
+  :hover {
+    fill: ${indigoDark.indigo11};
+  }
+`;
+
+type SearchInputProps = {
+  searchTerm: string;
+  setSearchTerm: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+const SearchInput = ({ searchTerm, setSearchTerm }: SearchInputProps) => {
+  return (
+    <StyledInput
+      icon={IconSearch}
+      id="table-search"
+      placeholder="Search Daos"
+      onChange={setSearchTerm}
+      defaultValue={searchTerm}
+    />
+  );
+};
+
+export default SearchInput;

apps/hub-app/src/components/SortDropdown.tsx

@@ -20,12 +20,12 @@ const DropdownButton = styled(Button)`
   }
 `;
 
-type FilterDropdownProps = {
+type SortDropdownProps = {
   sortBy: string;
   toggleSortBy: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-const SortDropdown = ({ sortBy, toggleSortBy }: FilterDropdownProps) => {
+const SortDropdown = ({ sortBy, toggleSortBy }: SortDropdownProps) => {
   const theme = useTheme();
 
   return (