mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
feat: create page
This commit is contained in:
parent
666e377cdb
commit
2c59660566
88
app/gallery/admin/create/page.tsx
Normal file
88
app/gallery/admin/create/page.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Search from "@/components/neroshitron/search";
|
||||
import Gallery from "@/components/neroshitron/gallery";
|
||||
import Masonry from "react-masonry-css";
|
||||
import SearchInput from "@/components/neroshitron/search_input";
|
||||
|
||||
function PageComponent() {
|
||||
|
||||
const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
|
||||
const [filePreviews, setFilePreviews] = useState<string[]>([]);
|
||||
const supabase = createClient();
|
||||
const user = supabase.auth.getUser();
|
||||
const getData = async () => {
|
||||
}
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [selectedGallery]);
|
||||
|
||||
const closeGallery = () => {
|
||||
setSelectedGallery(null);
|
||||
}
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = event.target.files;
|
||||
if (files) {
|
||||
const previews: string[] = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target && e.target.result) {
|
||||
previews.push(e.target.result.toString());
|
||||
if (previews.length === files.length) {
|
||||
setFilePreviews(previews);
|
||||
}
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full text-white flex justify-center items-center animate-in">
|
||||
<div className="w-1/2 rounded-md bg-primary p-12 mt-32">
|
||||
<div className="w-full flex">
|
||||
<input
|
||||
type="text"
|
||||
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
|
||||
placeholder="Gallery Name"
|
||||
/>
|
||||
<div className="w-1/2">
|
||||
<button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
|
||||
Create Gallery
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex">
|
||||
<div className="w-1/2 mr-2">
|
||||
<SearchInput
|
||||
nsfwButtonEnabled={false}
|
||||
searchChanged={(search) => {}}
|
||||
nsfwChanged={(nsfw) => {}}
|
||||
tagsChanged={(tags) => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<input
|
||||
className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3 file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white file:dark:text-white"
|
||||
type="file"
|
||||
id="formFileMultiple"
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
|
||||
{filePreviews.map((preview, index) => (
|
||||
<img key={index} src={preview} alt={`Preview ${index}`} />
|
||||
))}
|
||||
</Masonry>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default PageComponent;
|
||||
@ -42,10 +42,31 @@ function PageComponent() {
|
||||
}
|
||||
};
|
||||
|
||||
return (<div className="w-full text-white flex justify-center items-center">
|
||||
return (
|
||||
<div className="w-full text-white flex justify-center items-center animate-in">
|
||||
<div className="w-1/2 rounded-md bg-primary p-12 mt-32">
|
||||
<SearchInput nsfwButtonEnabled={false} searchChanged={(search) => { }} nsfwChanged={(nsfw) => { }} tagsChanged={(tags) => { }} />
|
||||
<input type="text" className="mb-8 rounded-md bg-secondary p-4 w-full text-white" placeholder="Gallery Name" />
|
||||
<div className="w-full flex">
|
||||
<input
|
||||
type="text"
|
||||
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
|
||||
placeholder="Gallery Name"
|
||||
/>
|
||||
<div className="w-1/2">
|
||||
<button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
|
||||
Create Gallery
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex">
|
||||
<div className="w-1/2">
|
||||
<SearchInput
|
||||
nsfwButtonEnabled={false}
|
||||
searchChanged={(search) => {}}
|
||||
nsfwChanged={(nsfw) => {}}
|
||||
tagsChanged={(tags) => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<input
|
||||
className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3 file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white file:dark:text-white"
|
||||
type="file"
|
||||
@ -53,19 +74,15 @@ function PageComponent() {
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<Masonry
|
||||
breakpointCols={3}
|
||||
className="my-masonry-grid pl-6 col-span-2"
|
||||
>
|
||||
<Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
|
||||
{filePreviews.map((preview, index) => (
|
||||
<img key={index} src={preview} alt={`Preview ${index}`} />
|
||||
))}
|
||||
</Masonry>
|
||||
<div>
|
||||
<button className="mt-4 bg-success hover:bg-success-light text-white rounded-md p-2">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default PageComponent;
|
||||
88
app/gallery/admin/view/page.tsx
Normal file
88
app/gallery/admin/view/page.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
import { createClient } from "@/utils/supabase/client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Search from "@/components/neroshitron/search";
|
||||
import Gallery from "@/components/neroshitron/gallery";
|
||||
import Masonry from "react-masonry-css";
|
||||
import SearchInput from "@/components/neroshitron/search_input";
|
||||
|
||||
function PageComponent() {
|
||||
|
||||
const [selectedGallery, setSelectedGallery] = useState<string | null>(null);
|
||||
const [filePreviews, setFilePreviews] = useState<string[]>([]);
|
||||
const supabase = createClient();
|
||||
const user = supabase.auth.getUser();
|
||||
const getData = async () => {
|
||||
}
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [selectedGallery]);
|
||||
|
||||
const closeGallery = () => {
|
||||
setSelectedGallery(null);
|
||||
}
|
||||
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = event.target.files;
|
||||
if (files) {
|
||||
const previews: string[] = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files[i];
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target && e.target.result) {
|
||||
previews.push(e.target.result.toString());
|
||||
if (previews.length === files.length) {
|
||||
setFilePreviews(previews);
|
||||
}
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full text-white flex justify-center items-center animate-in">
|
||||
<div className="w-1/2 rounded-md bg-primary p-12 mt-32">
|
||||
<div className="w-full flex">
|
||||
<input
|
||||
type="text"
|
||||
className="mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white"
|
||||
placeholder="Gallery Name"
|
||||
/>
|
||||
<div className="w-1/2">
|
||||
<button className="w-full bg-success hover:bg-success-light text-white rounded-md p-2">
|
||||
Create Gallery
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex">
|
||||
<div className="w-1/2 pr-1">
|
||||
<SearchInput
|
||||
nsfwButtonEnabled={false}
|
||||
searchChanged={(search) => {}}
|
||||
nsfwChanged={(nsfw) => {}}
|
||||
tagsChanged={(tags) => {}}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-1/2">
|
||||
<input
|
||||
className="relative m-0 block w-full min-w-0 flex-auto cursor-pointer rounded border border-solid border-secondary-lighter bg-transparent bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-surface transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:me-3 file:cursor-pointer file:overflow-hidden file:rounded-none file:border-0 file:border-e file:border-solid file:border-inherit file:bg-transparent file:px-3 file:py-[0.32rem] file:text-surface focus:border-primary focus:text-gray-700 focus:shadow-inset focus:outline-none dark:border-white/70 dark:text-white file:dark:text-white"
|
||||
type="file"
|
||||
id="formFileMultiple"
|
||||
multiple
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<Masonry breakpointCols={3} className="my-masonry-grid pl-6 col-span-2">
|
||||
{filePreviews.map((preview, index) => (
|
||||
<img key={index} src={preview} alt={`Preview ${index}`} />
|
||||
))}
|
||||
</Masonry>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default PageComponent;
|
||||
@ -3,6 +3,7 @@ import { createClient } from "@/utils/supabase/client";
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import Search from "@/components/neroshitron/search";
|
||||
import Gallery from "@/components/neroshitron/gallery";
|
||||
import Link from "next/link";
|
||||
|
||||
function PageComponent() {
|
||||
|
||||
@ -30,7 +31,9 @@ function PageComponent() {
|
||||
alt="Background"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-2/3">
|
||||
<Search gallerySelected={(gallery:string)=>{setSelectedGallery(gallery)}}/>
|
||||
</div>
|
||||
|
||||
{selectedGallery!=null ? (
|
||||
<>
|
||||
|
||||
@ -38,8 +38,17 @@ console.log(currentPage)
|
||||
return (
|
||||
<div className="flex justify-center items-center pt-2 ">
|
||||
<nav className="w-auto bg-info bg-opacity-80 flex justify-center z-10 h-16 animate-in rounded-md" style={{ backdropFilter: 'blur(10px)' }}>
|
||||
<div className="w-full max-w-2xl flex justify-between items-center p-3 text-sm">
|
||||
<div className="w-auto flex justify-between items-center p-3 text-sm">
|
||||
<div className="flex items-center gap-2 z-10">
|
||||
|
||||
{/* This is admin stuff */}
|
||||
<Link
|
||||
href="/gallery/admin"
|
||||
className={`py-2 px-3 w-32 text-center flex rounded-md lg:block hidden no-underline ${currentPage!="gallery" ? 'bg-secondary hover:bg-secondary-light' : 'bg-secondary hover:bg-secondary-light'}`}
|
||||
>
|
||||
<span className="hidden lg:block">Gallery Admin</span>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/gallery"
|
||||
className={`py-2 px-3 flex rounded-md no-underline ${currentPage!="gallery" ? 'bg-primary hover:bg-primary-light' : 'bg-secondary hover:bg-secondary-light'}`}
|
||||
|
||||
@ -64,7 +64,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
|
||||
return (
|
||||
<>
|
||||
<div className="relative w-full flex flex-col items-center justify-center z-10">
|
||||
<div className="search-box mx-auto my-auto w-full sm:w-full md:w-full lg:w-3/4 xl:w-3/4">
|
||||
<div className="search-box mx-auto my-auto w-full">
|
||||
<div className="flex flex-row">
|
||||
|
||||
{(selectingTags) ? (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user