logos-messaging/logos-messaging-frontend
1
0
Fork 0
mirror of https://github.com/logos-messaging/logos-messaging-frontend.git synced 2026-01-06 07:43:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

apply styles

Browse Source
This commit is contained in:
Sasha 2023-12-02 19:00:27 +01:00
parent 3858b67fa8
commit 17866bd142
No known key found for this signature in database
2 changed files with 39 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/app/components/Waku.tsx
View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import { Block } from "@/components/Block"; import { Block, BlockTypes } from "@/components/Block";
import { Subtitle } from "@/components/Subtitle"; import { Subtitle } from "@/components/Subtitle";
import { Button } from "@/components/Button"; import { Button } from "@/components/Button";
import { MessageContent, useWaku } from "@/hooks"; import { MessageContent, useWaku } from "@/hooks";
@ -20,52 +20,53 @@ export const Waku: React.FunctionComponent<{}> = () => {
); );
return ( return (
<Block className="mt-10"> <Block className="mt-10 flex flex-col md:flex-row lg:flex-row">
<Block> <Block>
<Subtitle> <Block>
Waku <Subtitle>
</Subtitle> Waku
<p className="text-sm">Content topic: {CONTENT_TOPIC}</p> </Subtitle>
</Block> <p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
</Block>
<Block className="mt-4"> <Block className="mt-4 mr-10 min-w-fit">
<label
htmlFor="nick-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Your nickname
</label>
<input
type="text"
id="nick-input"
placeholder="Choose a nickname"
value={nick}
onChange={onNickChange}
className="w-full mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>
</Block>
<Block className="mt-4">
<Block className="mb-2">
<label <label
htmlFor="message-input" htmlFor="nick-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
> >
Message Your nickname
</label> </label>
<input <input
type="text" type="text"
id="message-input" id="nick-input"
value={text} placeholder="Choose a nickname"
onChange={onMessageChange} value={nick}
placeholder="Text your message here" onChange={onNickChange}
className="w-full mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" className="w-96 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/> />
</Block> </Block>
<Button onClick={onSendClick}>Send</Button>
<Block className="mt-4">
<Block className="mb-2">
<label
htmlFor="message-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Message
</label>
<textarea
id="message-input"
value={text}
onChange={onMessageChange}
placeholder="Text your message here"
className="w-96 h-60 mr-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
/>
</Block>
<Button onClick={onSendClick}>Send</Button>
</Block>
</Block> </Block>
<Block className="mt-8"> <Block className="max-w-screen-md mt-10 md:mt-0">
<p className="text-l mb-4">Messages</p> <p className="text-l mb-4">Messages</p>
<div> <div>
<ul>{renderedMessages}</ul> <ul>{renderedMessages}</ul>
@ -83,7 +84,7 @@ function useMessage() {
setNick(e.currentTarget.value || ""); setNick(e.currentTarget.value || "");
}; };
const onMessageChange = (e: React.SyntheticEvent<HTMLInputElement>) => { const onMessageChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
setText(e.currentTarget.value || ""); setText(e.currentTarget.value || "");
}; };
@ -110,7 +111,7 @@ function renderMessage(content: MessageContent) {
</span> </span>
: :
</p> </p>
<p>{content.text}</p> <p className="break-words">{content.text}</p>
</li> </li>
); );
} }

2
src/app/home/page.tsx
View File

@ -4,7 +4,7 @@ import { Waku } from "@/app/components/Waku";
export default function Home() { export default function Home() {
return ( return (
<main className="flex min-h-screen flex-col p-24 font-mono max-w-screen-lg m-auto"> <main className="flex min-h-screen flex-col p-24 font-mono max-w-screen-lg">
<Header /> <Header />
<Waku /> <Waku />
</main> </main>