Skip to content

Commit

Permalink
chore: rules adding
Browse files Browse the repository at this point in the history
  • Loading branch information
@KagChi
KagChi committed Apr 25, 2024
1 parent dc4432f commit 6df2275
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 24 deletions.
60 changes: 43 additions & 17 deletions src/app/create/community/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
"use client";

import { CloudUpload, Send } from "lucide-react";
import { CircleX, CloudUpload, Equal, Send } from "lucide-react";
import { useState } from "react";
import { randomBytes } from "node:crypto";

interface Rule {
text: string;
id: string;
}

export default function Create() {
const [rules, setRules] = useState<Rule[]>([]);

return (
<>
<div className="container flex w-full flex-col gap-2 p-10 lg:max-w-6xl">
Expand All @@ -11,34 +20,51 @@ export default function Create() {
<div className="mt-12 flex flex-col gap-2 md:w-4/5 ">
<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Community name<span className="text-red-500">*</span></p>
<input className="min-h-8 w-full rounded-md bg-[#1B1B1B] p-2 outline-none" />
<input className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none" />
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Description<span className="text-red-500">*</span></p>
<textarea className="max-h-72 min-h-72 w-full rounded-md bg-[#1B1B1B] p-2 outline-none" />
<textarea className="max-h-72 min-h-72 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none" />
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Community<span className="text-red-500">*</span></p>
<select className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-2 outline-none">
<option>Select Community</option>

<optgroup label="Gaming">
<option value="1">Genshin Impact</option>
<option value="2">Valorant</option>
</optgroup>

<optgroup label="Crypto">
<option value="6">Bitcoin</option>
</optgroup>
</select>
<p className="text-2xl font-semibold">Rules<span className="text-red-500">*</span></p>
<input onKeyDown={e => {
if (e.key === "Enter" && e.currentTarget.value) {
setRules([...rules, { text: e.currentTarget.value, id: randomBytes(4).toString("hex") }]);
e.currentTarget.value = "";
}
}} className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none" />

{rules.length >= 1 &&
<div className="flex flex-col rounded-md bg-[#1B1B1B] py-2">
{
rules.map((x, i) => <div key={i} className="flex flex-row items-center justify-between rounded-md px-4 py-2">
<div className="flex flex-row gap-2">
<Equal />
<p>{x.text}</p>
</div>
<CircleX className="cursor-pointer" onClick={() => setRules(existing => existing.filter(y => y.id !== x.id)) } />
</div>)
}
</div>
}
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Icon</p>
<input accept="image/jpeg, image/jpg, image/webp, image/gif" id="icon" type="file" hidden />
<button onClick={() => document.getElementById("icon")?.click()} className="flex w-full flex-row items-center justify-between gap-2 rounded-md bg-[#1B1B1B] px-4 py-2 md:w-fit">
<p>Upload Icon</p>
<CloudUpload />
</button>
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Banner</p>
<input accept="image/jpeg, image/jpg, image/webp, image/gif" id="banner" type="file" hidden />
<button onClick={() => document.getElementById("image")?.click()} className="flex w-full flex-row items-center justify-between gap-2 rounded-md bg-[#1B1B1B] px-4 py-2 md:w-fit">
<button onClick={() => document.getElementById("banner")?.click()} className="flex w-full flex-row items-center justify-between gap-2 rounded-md bg-[#1B1B1B] px-4 py-2 md:w-fit">
<p>Upload Banner</p>
<CloudUpload />
</button>
Expand Down
6 changes: 3 additions & 3 deletions src/app/create/post/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ export default function Create() {
<div className="mt-12 flex flex-col gap-2 md:w-4/5 ">
<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Post title<span className="text-red-500">*</span></p>
<input className="min-h-8 w-full rounded-md bg-[#1B1B1B] p-2 outline-none" />
<input className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none" />
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Your message<span className="text-red-500">*</span></p>
<textarea className="max-h-72 min-h-72 w-full rounded-md bg-[#1B1B1B] p-2 outline-none" />
<textarea className="max-h-72 min-h-72 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none" />
</div>

<div className="flex flex-col gap-2 text-white">
<p className="text-2xl font-semibold">Community<span className="text-red-500">*</span></p>
<select className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-2 outline-none">
<select className="min-h-8 w-full rounded-md bg-[#1B1B1B] px-4 py-2 outline-none">
<option>Select Community</option>

<optgroup label="Gaming">
Expand Down
4 changes: 0 additions & 4 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ export default async function RootLayout({
}>) {
return (
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>

<body className={`${Baloo.className} flex h-full min-h-screen flex-row overflow-x-hidden`}>
<div className="shrink-0">
<Sidebar />
Expand Down

0 comments on commit 6df2275

Please sign in to comment.