UI blue/cyan

This commit is contained in:
smolgrrr 2023-09-14 23:44:13 +10:00
parent 8e3f3f9eea
commit 8205f8c207
4 changed files with 38 additions and 30 deletions

View File

@ -2,10 +2,12 @@ import { CogIcon } from '@heroicons/react/24/outline';
export default function Header() { export default function Header() {
return ( return (
<footer className="fixed bottom-0 z-20 w-full bg-gray-900 shadow-lg shadow-black"> <footer className="fixed bottom-0 z-20 w-full bg-gradient-to-r from-blue-900 to-cyan-500 shadow-lg shadow-black">
<label tabIndex={0} className="btn-ghost btn-circle btn"> <div className="flex justify-end items-center h-14"> {/* Adjust height as needed */}
<CogIcon className="h-24 w-24 text-white right-0" /> <button tabIndex={0} className="p-4">
</label> <CogIcon className="h-12 w-12 text-transperant" />
</button>
</div>
</footer> </footer>
); );
} }

View File

@ -43,7 +43,7 @@ const Home = () => {
return ( return (
<> <>
<main className="bg-gray-950 text-white min-h-screen"> <main className="bg-black text-white min-h-screen">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<NewThreadCard /> <NewThreadCard />
{events.map((event, index) => ( {events.map((event, index) => (

View File

@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
export default function CardContainer({ children }: PropsWithChildren) { export default function CardContainer({ children }: PropsWithChildren) {
return ( return (
<div className="card bg-gradient-to-r from-base-200 to-base-100 shadow-lg shadow-black"> <div className="card bg-gradient-to-r from-black to-neutral-950 shadow-lg shadow-black">
<div className="card-body p-4">{children}</div> <div className="card-body p-4">{children}</div>
</div> </div>
); );

View File

@ -1,36 +1,42 @@
import CardContainer from './CardContainer'; import CardContainer from './CardContainer';
import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
const NewThreadCard = () => { const NewThreadCard = () => {
return ( return (
<> <>
<CardContainer> <CardContainer>
<div className="flex flex-col"> <form
<form name="post" method="post" encType="multipart/form-data"><input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} /> name="post"
<div id="togglePostFormLink" className="desktop">Start a New Thread method="post"
encType="multipart/form-data"
className=""
>
<input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} />
<div id="togglePostFormLink" className="text-lg font-semibold">
Start a New Thread
</div> </div>
<table className="postForm" id="postForm"> <div>
<tbody> <textarea
<tr data-type="Comment"> name="com"
<td><textarea name="com" wrap="soft" /></td> wrap="soft"
</tr> className="w-full p-2 rounded bg-gradient-to-r from-blue-900 to-cyan-500 text-white border-none"
<tr data-type="File"> />
<td>File*</td> </div>
</tr> <div className="flex justify-between items-center">
</tbody> <div className="flex items-center">
<tfoot> <ArrowUpTrayIcon className="h-6 w-6 text-white" />
<tr> <input type="file" className="hidden" />
<td colSpan={2}> </div>
<div id="postFormError" /> <button type="submit" className="px-4 py-2 bg-gradient-to-r from-cyan-900 to-blue-500 rounded text-white font-semibold">
</td> Submit
</tr> </button>
</tfoot> </div>
</table> <div id="postFormError" className="text-red-500" />
</form> </form>
</div>
</CardContainer> </CardContainer>
</> </>
); );
}; };
export default NewThreadCard; export default NewThreadCard;