added new styling w/ tailwind catppuccin plugin
This commit is contained in:
parent
cb788d4faf
commit
4be0d9a5bd
|
|
@ -2,12 +2,15 @@ import { Link } from "@remix-run/react";
|
|||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="flex space-x-4 justify-center items-center py-4 mb-12 bg-slate-50 border">
|
||||
<div>
|
||||
<h1>lauta</h1>
|
||||
<div className="flex space-x-4 justify-center items-center py-6 px-12 mb-12 bg-ctp-crust rounded shadow-lg shadow-ctp-sapphire outline">
|
||||
<div className="flex-1">
|
||||
|
||||
</div>
|
||||
<nav>
|
||||
<Link className="text-sky-600 hover:text-sky-800" to={'/'}>threads</Link>
|
||||
<div className="">
|
||||
<h1 className="text-4xl font-bold text-ctp-flamingo">Lauta</h1>
|
||||
</div>
|
||||
<nav className="flex-1 flex justify-end">
|
||||
<Link className="text-ctp-blue hover:underline hover:text-ctp-teal" to={'/'}>threads</Link>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import { useState } from "react";
|
||||
import Header from "./Header";
|
||||
|
||||
export default function Overlay({ children }) {
|
||||
const [theme, setTheme] = useState("latte");
|
||||
|
||||
return (
|
||||
<div className="container mx-auto">
|
||||
<div className={`max-w-5xl mx-auto p-8`}>
|
||||
<Header/>
|
||||
{children}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function App() {
|
|||
<Meta />
|
||||
<Links />
|
||||
</head>
|
||||
<body>
|
||||
<body className="dark:ctp-mocha bg-ctp-base">
|
||||
<Outlet />
|
||||
<ScrollRestoration />
|
||||
<Scripts />
|
||||
|
|
|
|||
|
|
@ -65,39 +65,37 @@ export default function Index() {
|
|||
|
||||
return (
|
||||
<Overlay>
|
||||
<div className="bg-slate-100 border p-4 space-y-4">
|
||||
<h1 className="text-center font-semibold text-2xl text-gray-800">Create a thread</h1>
|
||||
<Form className="rounded flex flex-col text-center space-y-1 justify-center items-center " method="post" encType="multipart/form-data">
|
||||
<label htmlFor="title-input">Title:
|
||||
<textarea required minLength={3} type="text" name="title" placeholder="Lain" />
|
||||
<div className="bg-ctp-crust outline rounded-xl shadow-lg shadow-ctp-red max-w-2xl mx-auto p-4 space-y-4">
|
||||
<h1 className="text-center text-4xl font-semibold text-transparent bg-clip-text bg-gradient-to-br from-ctp-subtext0 to-ctp-subtext1 ">Create a thread</h1>
|
||||
<Form className="rounded flex flex-wrap text-center justify-center items-center " method="post" encType="multipart/form-data">
|
||||
<label className="flex flex-col m-2" htmlFor="title-input"><span className="font-semibold text-ctp-subtext0">Title</span>
|
||||
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded-md shadow shadow-ctp-overlay0" required minLength={3} type="text" name="title" placeholder="Lain" />
|
||||
<p>{errors ? errors.title : ''}</p>
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="post-input">Post:
|
||||
<textarea required minLength={3} type="text" name="post" placeholder="Iwakura" />
|
||||
<label className="flex flex-col m-2" htmlFor="post-input"><span className="font-semibold text-ctp-subtext0">Post</span>
|
||||
<textarea className=" bg-ctp-surface0 m-1 p-1 rounded shadow shadow-ctp-overlay0" required minLength={3} type="text" name="post" placeholder="Iwakura" />
|
||||
<p>{errors ? errors.post : ''}</p>
|
||||
</label>
|
||||
<br />
|
||||
<label htmlFor="image-upload">Image: (500kb max) <br />
|
||||
<input required accept="image/*" type="file" id="image-upload" name="image" />
|
||||
<label className="flex flex-col m-2" htmlFor="image-upload"><span className="font-semibold text-ctp-subtext0">Image</span>
|
||||
<input className="block w-full px-3 py-1.5 text-base font-semibold text-ctp-text bg-ctp-surface0 bg-clip-padding rounded transition ease-in-out m-0" required accept="image/*" type="file" id="image-upload" name="image" />
|
||||
<p>{errors ? errors.image : ''}</p>
|
||||
</label>
|
||||
<br />
|
||||
<button className="bg-white py-2 px-4 rounded-full" type="submit">Submit</button>
|
||||
<button className=" bg-ctp-surface1 shadow shadow-ctp-overlay0 hover hover:bg-ctp-surface2 py-2 px-4 hover:underline rounded-full" type="submit">Create!</button>
|
||||
</Form>
|
||||
</div>
|
||||
{data.length > 0 ?
|
||||
<ul className="flex flex-wrap justify-around items-center p-8">
|
||||
{data.map(thread =>
|
||||
<li className="border shadow rounded-xl p-4 m-4 hover:shadow-xl scale-100 hover:scale-110 duration-500" key={thread.id}>
|
||||
<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-500" 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 rounded " src={`/uploads/${thread.imageName}`} alt="" />
|
||||
<img className="w-48 rounded-xl " src={`/uploads/${thread.imageName}`} alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl text-center tracking-tighter text-gray-700">{thread.title}</h2>
|
||||
<p className="text-gray-400 text-center">{thread.post}</p>
|
||||
<p className=" text-xs text-center text-gray-300">Posts: {thread.posts.length}</p>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
import { redirect, unstable_createFileUploadHandler, unstable_parseMultipartFormData, json } from "@remix-run/node";
|
||||
import { useParams } from "@remix-run/react";
|
||||
import { useLoaderData, Form, useActionData } from "@remix-run/react";
|
||||
import { useState } from "react";
|
||||
import Overlay from "~/components/Overlay";
|
||||
import prisma from "~/utils/db.server";
|
||||
|
||||
function scrollTo(hash) {
|
||||
location.hash = "#" + hash;
|
||||
}
|
||||
|
||||
export async function action({ request, params }) {
|
||||
const threadId = params.threadId;
|
||||
|
||||
|
|
@ -69,32 +74,27 @@ export default function Thread() {
|
|||
|
||||
return (
|
||||
<Overlay>
|
||||
<div className="flex flex-col p-4">
|
||||
<div className="flex flex-col p-12 bg-ctp-crust outline rounded">
|
||||
<div className="">
|
||||
<span><strong>{data.title}</strong> Post id: <strong>{data.id}</strong> Created at: <strong>{data.createdAt}</strong> Reply count: <strong>{data.posts.length}</strong></span>
|
||||
<br />
|
||||
<a href={`/uploads/${data.imageName}`} target="_blank" referrerPolicy="no-referrer"><img src={`/uploads/${data.imageName}`} alt="post image" width={240} /></a>
|
||||
<p>{data.post}</p>
|
||||
</div>
|
||||
<ul className="flex flex-col m-8 even:bg-neutral-50 odd:bg-neutral-100">
|
||||
<ul className="flex flex-col m-8 ">
|
||||
{data.posts.map(post =>
|
||||
<li className="p-4" key={post.id}>
|
||||
<a name={`${post.id}`}></a>
|
||||
<span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
|
||||
<a href="#bottom"><button className="text-sky-600" onClick={() => {
|
||||
setReplying(post.id)
|
||||
}}>Reply</button></a>
|
||||
|
||||
<li className="rounded shadow p-4 m-4 odd:bg-ctp-base even:bg-ctp-mantle" key={post.id}>
|
||||
<span id={`${post.id}`}>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
|
||||
<button onClick={() => setReplying(post.id)}>Reply</button>
|
||||
<br />
|
||||
{post.replyingTo ? <a className="font-semibold text-sm hover:underline" href={`#${post.replyingTo}`}> Replying to id: {post.replyingTo}</a> : ''}
|
||||
{post.replyingTo ? <a className="font-semibold text-sm hover:underline" href={`#${post.replyingTo}`}>Replying to id: {post.replyingTo}</a> : ''}
|
||||
{post.imageName !== null ? <a href={`/uploads/${post.imageName}`} target="_blank" referrerPolicy="no-referrer"><img width={240} src={`/uploads/${post.imageName}`} alt="post image" /></a> : ''}
|
||||
<p>{post.comment}</p>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
<Form className="bg-slate-100 p-4 space-y-2 shadow flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
|
||||
<a className="" name="bottom"></a>
|
||||
<Form className=" bg-ctp-crust p-4 space-y-2 shadow-ctp-flamingo shadow-lg outline m-16 rounded flex flex-col justify-center items-center" method="post" encType="multipart/form-data">
|
||||
<label htmlFor="text-input">
|
||||
{replying ? <p>Replying to reply id: {replying}</p> : ''}
|
||||
Post: <input required minLength={3} name="post" type="text" />
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@
|
|||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "^0.1.1",
|
||||
"@remix-run/dev": "^1.10.0",
|
||||
"@remix-run/eslint-config": "^1.10.0",
|
||||
"concurrently": "^7.6.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
'@catppuccin/tailwindcss': ^0.1.1
|
||||
'@prisma/client': ^4.8.1
|
||||
'@remix-run/dev': ^1.10.0
|
||||
'@remix-run/eslint-config': ^1.10.0
|
||||
|
|
@ -25,6 +26,7 @@ dependencies:
|
|||
react-dom: 18.2.0_react@18.2.0
|
||||
|
||||
devDependencies:
|
||||
'@catppuccin/tailwindcss': 0.1.1
|
||||
'@remix-run/dev': 1.10.0_cnepnc4gsxd24ifuuhg36fwfo4
|
||||
'@remix-run/eslint-config': 1.10.0_eslint@8.31.0+react@18.2.0
|
||||
concurrently: 7.6.0
|
||||
|
|
@ -1352,6 +1354,19 @@ packages:
|
|||
to-fast-properties: 2.0.0
|
||||
dev: true
|
||||
|
||||
/@catppuccin/palette/0.1.5:
|
||||
resolution: {integrity: sha512-IQLsZwXDMpLc5CFGjIMa/gFnnFL/QLB280F11B51JweZHerZ/FgPXdIR4eQqn1CgrqI3wGfgnj1LVPx12DV/Uw==}
|
||||
dev: true
|
||||
|
||||
/@catppuccin/tailwindcss/0.1.1:
|
||||
resolution: {integrity: sha512-WWOzx8uOf3QPZ1HdVSkpgaqzMzrfYpOgAketQAQ7493eFhlYC4bJ1ViT5ukhwfhzuu3xnmke+Op2qjhHnyjt8g==}
|
||||
dependencies:
|
||||
'@catppuccin/palette': 0.1.5
|
||||
tailwindcss: 3.2.4
|
||||
transitivePeerDependencies:
|
||||
- ts-node
|
||||
dev: true
|
||||
|
||||
/@esbuild-plugins/node-modules-polyfill/0.1.4_esbuild@0.16.3:
|
||||
resolution: {integrity: sha512-uZbcXi0zbmKC/050p3gJnne5Qdzw8vkXIv+c2BW0Lsc1ji1SkrxbKPUy5Efr0blbTu1SL8w4eyfpnSdPg3G0Qg==}
|
||||
peerDependencies:
|
||||
|
|
|
|||
|
|
@ -6,5 +6,10 @@ module.exports = {
|
|||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: "ctp",
|
||||
defaultFlavour: "latte",
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue