qwertyasdfgh
/
imageboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added searching for a specific thread, dark mode toggle in progress

This commit is contained in:
Joonas 2023-01-15 22:47:25 +02:00
parent f700034a59
commit 30bc9cfcd3
3 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/root.jsx
View File

@ -21,14 +21,13 @@ export const meta = () => ({
export default function App() {
return (
<html lang="en">
<html className="dark" lang="en">
<head>
<Meta />
<Links />
</head>
<body className="dark:ctp-mocha dark:bg-ctp-base">
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>

35
app/routes/index.jsx
View File

@ -2,6 +2,7 @@ import { useLoaderData, useActionData, Form, Link } from "@remix-run/react";
import { unstable_createFileUploadHandler, unstable_parseMultipartFormData, json, redirect } from "@remix-run/node";
import prisma from "~/utils/db.server";
import Overlay from "~/components/Overlay";
import { useState } from "react";
export async function action({ request }) {
const clonedData = request.clone();
@ -66,7 +67,8 @@ export async function loader() {
export default function Index() {
const data = useLoaderData();
const errors = useActionData();
const [search, setSearch] = useState('');
return (
<Overlay>
<div className="bg-ctp-crust outline rounded-xl shadow-lg shadow-ctp-red max-w-2xl mx-auto p-4 space-y-4">
@ -88,21 +90,26 @@ export default function Index() {
<button className=" bg-ctp-surface1 text-ctp-flamingo shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>
</Form>
</div>
<Form className="pt-8" method="get">
<label className="flex flex-col items-center" htmlFor="thread-search"><span className="text-2xl tracking-widest">Search for a thread {search}</span>
<input onChange={e => setSearch(e.target.value)} value={search} className="w-fit bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" placeholder="Search term..." type="text" name="search-term" id="search" />
</label>
</Form>
{data.length > 0 ?
<ul className="flex flex-wrap justify-around items-center p-8">
{data.map(thread =>
<li className="bg-ctp-mantle shadow-xl outline shadow-ctp-pink rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-300" key={thread.id}>
<Link className="space-y-4 flex flex-col" to={`threads/${thread.id}`}>
<div className="flex items-center justify-center">
<img className="w-48 max-h-96 rounded-xl " src={`/uploads/${thread.imageName}`} alt="thread image" />
</div>
<div>
<h2 className="text-2xl font-semibold text-center tracking-tighter ">{thread.title}</h2>
<p className=" text-center text-ctp-subtext0">{thread.post}</p>
<p className=" text-xs text-center text-ctp-subtext1 ">Posts: {thread.posts.length}</p>
</div>
</Link>
</li>
{data.map(thread =>
thread.title.includes(search) || thread.post.includes(search) ? <li className="bg-ctp-mantle shadow-xl outline shadow-ctp-pink rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-300" key={thread.id}>
<Link className="space-y-4 flex flex-col" to={`threads/${thread.id}`}>
<div className="flex items-center justify-center">
<img className="w-48 max-h-96 rounded-xl " src={`/uploads/${thread.imageName}`} alt="thread image" />
</div>
<div>
<h2 className="text-2xl font-semibold text-center tracking-tighter ">{thread.title}</h2>
<p className=" text-center text-ctp-subtext0">{thread.post}</p>
<p className=" text-xs text-center text-ctp-subtext1 ">Posts: {thread.posts.length}</p>
</div>
</Link>
</li> : ''
)}
</ul>
:

1
tailwind.config.js
View File

@ -3,6 +3,7 @@ module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {},
},