forked from burakorkmez/mern-chat-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9180cd3
commit 7aadf4f
Showing
21 changed files
with
1,740 additions
and
136 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +0,0 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a:nth-of-type(2) .logo { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,12 @@ | ||
| import { useState } from 'react' | ||
| import reactLogo from './assets/react.svg' | ||
| import viteLogo from '/vite.svg' | ||
| import './App.css' | ||
| import "./App.css"; | ||
| import Home from "./pages/home/Home"; | ||
|
|
||
| function App() { | ||
| const [count, setCount] = useState(0) | ||
|
|
||
| return ( | ||
| <> | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank"> | ||
| <img src={viteLogo} className="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h1>Vite + React</h1> | ||
| <div className="card"> | ||
| <button onClick={() => setCount((count) => count + 1)}> | ||
| count is {count} | ||
| </button> | ||
| <p> | ||
| Edit <code>src/App.jsx</code> and save to test HMR | ||
| </p> | ||
| </div> | ||
| <p className="read-the-docs"> | ||
| Click on the Vite and React logos to learn more | ||
| </p> | ||
| </> | ||
| ) | ||
| return ( | ||
| <div className='p-4 h-screen flex items-center justify-center'> | ||
| <Home /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App | ||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| const Message = () => { | ||
| return ( | ||
| <div className='chat chat-end'> | ||
| <div className='chat-image avatar'> | ||
| <div className='w-10 rounded-full'> | ||
| <img | ||
| alt='Tailwind CSS chat bubble component' | ||
| src={ | ||
| "https://cdn0.iconfinder.com/data/icons/communication-line-10/24/account_profile_user_contact_person_avatar_placeholder-512.png" | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={`chat-bubble text-white bg-blue-500`}>Hi! What is upp?</div> | ||
| <div className='chat-footer opacity-50 text-xs flex gap-1 items-center'>12:42</div> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Message; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import MessageInput from "./MessageInput"; | ||
| import Messages from "./Messages"; | ||
| import { TiMessages } from "react-icons/ti"; | ||
|
|
||
| const MessageContainer = () => { | ||
| const noChatSelected = true; | ||
| return ( | ||
| <div className='md:min-w-[450px] flex flex-col'> | ||
| {noChatSelected ? ( | ||
| <NoChatSelected /> | ||
| ) : ( | ||
| <> | ||
| {/* Header */} | ||
| <div className='bg-slate-500 px-4 py-2 mb-2'> | ||
| <span className='label-text'>To:</span>{" "} | ||
| <span className='text-gray-900 font-bold'>John doe</span> | ||
| </div> | ||
| <Messages /> | ||
| <MessageInput /> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
| export default MessageContainer; | ||
|
|
||
| const NoChatSelected = () => { | ||
| return ( | ||
| <div className='flex items-center justify-center w-full h-full'> | ||
| <div className='px-4 text-center sm:text-lg md:text-xl text-gray-200 font-semibold flex flex-col items-center gap-2'> | ||
| <p>Welcome 👋 John Doe ❄</p> | ||
| <p>Select a chat to start messaging</p> | ||
| <TiMessages className='text-3xl md:text-6xl text-center' /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| // STARTER CODE SNIPPET | ||
| // import MessageInput from "./MessageInput"; | ||
| // import Messages from "./Messages"; | ||
|
|
||
| // const MessageContainer = () => { | ||
| // return ( | ||
| // <div className='md:min-w-[450px] flex flex-col'> | ||
| // <> | ||
| // {/* Header */} | ||
| // <div className='bg-slate-500 px-4 py-2 mb-2'> | ||
| // <span className='label-text'>To:</span> <span className='text-gray-900 font-bold'>John doe</span> | ||
| // </div> | ||
|
|
||
| // <Messages /> | ||
| // <MessageInput /> | ||
| // </> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
| // export default MessageContainer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { BsSend } from "react-icons/bs"; | ||
|
|
||
| const MessageInput = () => { | ||
| return ( | ||
| <form className='px-4 my-3'> | ||
| <div className='w-full relative'> | ||
| <input | ||
| type='text' | ||
| className='border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 text-white' | ||
| placeholder='Send a message' | ||
| /> | ||
| <button type='submit' className='absolute inset-y-0 end-0 flex items-center pe-3'> | ||
| <BsSend /> | ||
| </button> | ||
| </div> | ||
| </form> | ||
| ); | ||
| }; | ||
| export default MessageInput; | ||
|
|
||
| // STARTER CODE SNIPPET | ||
| // import { BsSend } from "react-icons/bs"; | ||
|
|
||
| // const MessageInput = () => { | ||
| // return ( | ||
| // <form className='px-4 my-3'> | ||
| // <div className='w-full'> | ||
| // <input | ||
| // type='text' | ||
| // className='border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 text-white' | ||
| // placeholder='Send a message' | ||
| // /> | ||
| // <button type='submit' className='absolute inset-y-0 end-0 flex items-center pe-3'> | ||
| // <BsSend /> | ||
| // </button> | ||
| // </div> | ||
| // </form> | ||
| // ); | ||
| // }; | ||
| // export default MessageInput; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import Message from "./Message"; | ||
|
|
||
| const Messages = () => { | ||
| return ( | ||
| <div className='px-4 flex-1 overflow-auto'> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| <Message /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Messages; | ||
|
|
||
| // STARTER CODE SNIPPET | ||
| // import Message from "./Message"; | ||
|
|
||
| // const Messages = () => { | ||
| // return ( | ||
| // <div className='px-4 flex-1 overflow-auto'> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // <Message /> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
| // export default Messages; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| const Conversation = () => { | ||
| return ( | ||
| <> | ||
| <div className='flex gap-2 items-center hover:bg-sky-500 rounded p-2 py-1 cursor-pointer'> | ||
| <div className='avatar online'> | ||
| <div className='w-12 rounded-full'> | ||
| <img | ||
| src='https://cdn0.iconfinder.com/data/icons/communication-line-10/24/account_profile_user_contact_person_avatar_placeholder-512.png' | ||
| alt='user avatar' | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='flex flex-col flex-1'> | ||
| <div className='flex gap-3 justify-between'> | ||
| <p className='font-bold text-gray-200'>John Doe</p> | ||
| <span className='text-xl'>🎃</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='divider my-0 py-0 h-1' /> | ||
| </> | ||
| ); | ||
| }; | ||
| export default Conversation; | ||
|
|
||
| // STARTER CODE SNIPPET | ||
| // const Conversation = () => { | ||
| // return ( | ||
| // <> | ||
| // <div className='flex gap-2 items-center hover:bg-sky-500 rounded p-2 py-1 cursor-pointer'> | ||
| // <div className='avatar online'> | ||
| // <div className='w-12 rounded-full'> | ||
| // <img | ||
| // src='https://cdn0.iconfinder.com/data/icons/communication-line-10/24/account_profile_user_contact_person_avatar_placeholder-512.png' | ||
| // alt='user avatar' | ||
| // /> | ||
| // </div> | ||
| // </div> | ||
|
|
||
| // <div className='flex flex-col flex-1'> | ||
| // <div className='flex gap-3 justify-between'> | ||
| // <p className='font-bold text-gray-200'>John Doe</p> | ||
| // <span className='text-xl'>🎃</span> | ||
| // </div> | ||
| // </div> | ||
| // </div> | ||
|
|
||
| // <div className='divider my-0 py-0 h-1' /> | ||
| // </> | ||
| // ); | ||
| // }; | ||
| // export default Conversation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import Conversation from "./Conversation"; | ||
|
|
||
| const Conversations = () => { | ||
| return ( | ||
| <div className='py-2 flex flex-col overflow-auto'> | ||
| <Conversation /> | ||
| <Conversation /> | ||
| <Conversation /> | ||
| <Conversation /> | ||
| <Conversation /> | ||
| <Conversation /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default Conversations; | ||
|
|
||
| // STARTER CODE SNIPPET | ||
| // import Conversation from "./Conversation"; | ||
|
|
||
| // const Conversations = () => { | ||
| // return ( | ||
| // <div className='py-2 flex flex-col overflow-auto'> | ||
| // <Conversation /> | ||
| // <Conversation /> | ||
| // <Conversation /> | ||
| // <Conversation /> | ||
| // <Conversation /> | ||
| // <Conversation /> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
| // export default Conversations; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { BiLogOut } from "react-icons/bi"; | ||
| const LogoutButton = () => { | ||
| return ( | ||
| <div className='mt-auto'> | ||
| <BiLogOut className='w-6 h-6 text-white cursor-pointer' /> | ||
| </div> | ||
| ); | ||
| }; | ||
| export default LogoutButton; |
Oops, something went wrong.