diff --git a/front/src/pages/Home.tsx b/front/src/pages/Home.tsx index 334f3bb..e5ee3de 100644 --- a/front/src/pages/Home.tsx +++ b/front/src/pages/Home.tsx @@ -156,45 +156,47 @@ export default function Home() {

Channels

- All channels - {user && ( - Create channel - )} -
-

Recent active channels

- -
-
-

Last created channels

- -
-
-

Search channels

- setSearch(e.target.value)} - /> - +
+ All channels + {user && ( + Create channel + )} +
+

Recent active channels

+
    + {channels?.map((channel) => ( +
  • + {channel.name} +
  • + ))} +
+
+
+

Last created channels

+
    + {newChannels?.map((channel) => ( +
  • + {channel.name} +
  • + ))} +
+
+
+

Search channels

+ setSearch(e.target.value)} + /> +
    + {searchedChannels?.map((channel) => ( +
  • + {channel.name} +
  • + ))} +
+
diff --git a/front/src/styles/Home.css b/front/src/styles/Home.css index f958fcf..e6bd200 100644 --- a/front/src/styles/Home.css +++ b/front/src/styles/Home.css @@ -31,6 +31,9 @@ border: 1px solid #270722; padding: 10px; background-color: #fff6fd; + display: flex; + flex-direction: column; + align-items: center; } .messages-list { @@ -50,8 +53,17 @@ display: flex; flex-direction: column; background-color: #fff6fd; + align-items: center; } +.channels-content { + width: 100%; + display: flex; + flex-direction: column; + align-items: left; +} + + @media (max-width: 800px) { .home-header { flex-direction: column;