Spaces:
Runtime error
Runtime error
File size: 3,172 Bytes
cf8b7da |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
"use client";
import { useState } from "react";
import classNames from "classnames";
import { motion } from "framer-motion";
import { InputGeneration } from "@/components/input-generation";
import { Button } from "@/components/button";
const categories = [
{
key: "community",
label: "Community",
},
{
key: "my-own",
label: "My own generations",
},
];
const IMAGES = [
"https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
"https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
"https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
"https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
"https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
"https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
];
export const Main = () => {
const [prompt, setPrompt] = useState<string>("");
const [category, setCategory] = useState<string>("community");
return (
<main className="pt-6 z-[2] relative">
<div className="px-6 mx-auto max-w-7xl">
<div className="flex items-center justify-between w-full -translate-y-1/2">
<InputGeneration prompt={prompt} onChange={setPrompt} />
<div className="flex items-center justify-end gap-5 w-full">
{categories.map(({ key, label }) => (
<Button
key={key}
theme={key !== category ? "white" : "primary"}
onClick={() => setCategory(key)}
>
{label}
</Button>
))}
</div>
</div>
</div>
<div className="px-6 max-w-[1722px] mx-auto grid grid-cols-5 gap-5 mt-14">
{Array.from({ length: 5 }).map((_, e) => (
<div
key={e}
className={classNames("w-full grid-cols-1 grid gap-5", {
"translate-y-12": e % 2,
})}
>
{Array.from({ length: 6 }).map((_, i) => (
<motion.div
key={i}
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.35, delay: i * 0.1 }}
className="rounded-3xl h-[377px] bg-cover cursor-pointer relative z-[1] group overflow-hidden"
>
<div
style={{
backgroundImage: `url(${
IMAGES[Math.floor(Math.random() * IMAGES.length)]
})`,
}}
className="rounded-3xl bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125"
/>
</motion.div>
))}
</div>
))}
</div>
</main>
);
};
|