Discord Clone Using Next.js and Tailwind - Part 3: Channel List

• discord-clone-nextjs

  3 21 8.4 TypeScript

  Building a discord clone using NextJS, TailwindCSS, and the Stream Chat and Audio and Video SDKs.

  

Although this article was long, we hope you enjoyed it and learned something from it. Let us know if you have questions or ideas. You can find the project on GitHub.

• stylegan2-pytorch

  1,989 3,613 0.0 Python

  Simplest working implementation of Stylegan2, state of the art generative adversarial network, in Pytorch. Enabling everyone to experience disentanglement

export default function ChannelListBottomBar(): JSX.Element { const { client } = useChatContext(); const [micActive, setMicActive] = useState(false); const [audioActive, setAudioActive] = useState(false); return (

{client.user?.image && (

div> )}

{client.user?.name} span> {client.user?.online ? 'Online' : 'Offline'} span> p> button>

setMicActive((currentValue) => !currentValue)} > button> setAudioActive((currentValue) => !currentValue)} > button> button> div> ); }

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,280 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

• Next.js

  2,042 120,572 10.0 JavaScript

  The React Framework

  

Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

• heroicons

  78 20,690 7.3 JavaScript

  A set of free MIT-licensed high-quality SVG icons for UI development.

  

We start with the toggle button. We want icons for this that we get from heroicons. Let’s create a new file in the ChannelList folder called Icons.tsx and paste the code for the icons here to have a solid separation:

• customdiscordrpc

  1,200 14 4.9 C#

  Customizable Discord Rich Presence Client for Windows.

Welcome to our series about building a Discord clone using Next.js and TailwindCSS. In the previous posts, we covered setting up the project and adding the server list. This one will tackle the channel list that will look like this:

Suggest a related project