logos-messaging/logos-messaging-frontend
1
0
Fork 0
mirror of https://github.com/logos-messaging/logos-messaging-frontend.git synced 2026-01-04 23:03:08 +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 { Block } from "@/components/Block";
import { Block, BlockTypes } from "@/components/Block";
import { Subtitle } from "@/components/Subtitle";
import { Button } from "@/components/Button";
import { MessageContent, useWaku } from "@/hooks";
@ -20,52 +20,53 @@ export const Waku: React.FunctionComponent<{}> = () => {
);
return (
<Block className="mt-10">
<Block className="mt-10 flex flex-col md:flex-row lg:flex-row">
<Block>
<Subtitle>
Waku
</Subtitle>
<p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
</Block>
<Block>
<Subtitle>
Waku
</Subtitle>
<p className="text-sm">Content topic: {CONTENT_TOPIC}</p>
</Block>
<Block className="mt-4">
<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">
<Block className="mt-4 mr-10 min-w-fit">
<label
htmlFor="message-input"
htmlFor="nick-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Message
Your nickname
</label>
<input
type="text"
id="message-input"
value={text}
onChange={onMessageChange}
placeholder="Text your message here"
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"
id="nick-input"
placeholder="Choose a nickname"
value={nick}
onChange={onNickChange}
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>
<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 className="mt-8">
<Block className="max-w-screen-md mt-10 md:mt-0">
<p className="text-l mb-4">Messages</p>
<div>
<ul>{renderedMessages}</ul>
@ -83,7 +84,7 @@ function useMessage() {
setNick(e.currentTarget.value || "");
};
const onMessageChange = (e: React.SyntheticEvent<HTMLInputElement>) => {
const onMessageChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
setText(e.currentTarget.value || "");
};
@ -110,7 +111,7 @@ function renderMessage(content: MessageContent) {
</span>
:
</p>
<p>{content.text}</p>
<p className="break-words">{content.text}</p>
</li>
);
}

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

@ -4,7 +4,7 @@ import { Waku } from "@/app/components/Waku";
export default function Home() {
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 />
<Waku />
</main>