feat: added graphics
This commit is contained in:
parent
1ff20dcf73
commit
c8c77b536e
Binary file not shown.
After Width: | Height: | Size: 137 KiB |
|
@ -1,24 +1,26 @@
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation"
|
||||||
import { headers } from "next/headers";
|
import { headers } from "next/headers"
|
||||||
import Feed from "@/components/Feed";
|
import Feed from "@/components/Feed"
|
||||||
import SearchBar from "@/components/SearchBar";
|
import SearchBar from "@/components/SearchBar"
|
||||||
import { fetchFeedData } from "@/lib/feed.ts";
|
import { fetchFeedData } from "@/lib/feed.ts"
|
||||||
|
import * as GraphicSection from "@/components/GraphicSection"
|
||||||
|
import { ArrowIcon } from "@/components/ArrowIcon"
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
searchParams?: {
|
searchParams?: {
|
||||||
q?: string | undefined;
|
q?: string | undefined
|
||||||
};
|
}
|
||||||
};
|
|
||||||
|
|
||||||
export default async function Home({ searchParams }: Props) {
|
|
||||||
const headerList = headers();
|
|
||||||
const referer = headerList.get("referer");
|
|
||||||
|
|
||||||
if (!referer && searchParams?.q) {
|
|
||||||
redirect(`/search?q=${searchParams.q}`);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = await fetchFeedData({});
|
export default async function Home({ searchParams }: Props) {
|
||||||
|
const headerList = headers()
|
||||||
|
const referer = headerList.get("referer")
|
||||||
|
|
||||||
|
if (!referer && searchParams?.q) {
|
||||||
|
redirect(`/search?q=${searchParams.q}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await fetchFeedData({})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -32,7 +34,55 @@ export default async function Home({ searchParams }: Props) {
|
||||||
initialData={data.data}
|
initialData={data.data}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<GraphicSection.Root href="https://lumeweb.com" className="h-[100px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
|
||||||
|
<GraphicSection.Background>
|
||||||
|
<img
|
||||||
|
src="/lume-logo-bg.png"
|
||||||
|
className="background transition-transform duration-500 transform-gpu absolute -top-[320px] -right-10"
|
||||||
|
alt=""
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</GraphicSection.Background>
|
||||||
|
<GraphicSection.Foreground>
|
||||||
|
<div className="mt-5 flex flex-col items-center justify-center">
|
||||||
|
<p className="text-white text-lg">
|
||||||
|
WEB3.NEWS is a project by Lume. Let’s build an open, user-owned
|
||||||
|
web together.
|
||||||
|
</p>
|
||||||
|
<div className="link flex text-gray-400">
|
||||||
|
<span>
|
||||||
|
Learn more about Lume and join our community
|
||||||
|
</span>
|
||||||
|
<ArrowIcon className=" ml-2 mt-2"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GraphicSection.Foreground>
|
||||||
|
</GraphicSection.Root>
|
||||||
|
<GraphicSection.Root href="https://lumeweb.com" className="h-[300px] border border-gray-800 cursor-pointer [&:hover_.link]:underline [&:hover_.background]:rotate-12 [&:hover_.background]:scale-110">
|
||||||
|
<GraphicSection.Background>
|
||||||
|
<img
|
||||||
|
src="/lume-logo-bg.png"
|
||||||
|
className="background transition-transform duration-500 transform-gpu absolute -top-[100px] -left-10"
|
||||||
|
alt=""
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
</GraphicSection.Background>
|
||||||
|
<GraphicSection.Foreground>
|
||||||
|
<div className="flex flex-col items-start justify-center h-full w-[500px] float-right mr-20">
|
||||||
|
<p className="text-white text-2xl">
|
||||||
|
WEB3.NEWS is a project by <span className="underline">Lume</span>. Let’s build an open, user-owned
|
||||||
|
web together.
|
||||||
|
</p>
|
||||||
|
<div className="link mt-2 flex text-gray-400">
|
||||||
|
<span>
|
||||||
|
Learn more about Lume and join our community
|
||||||
|
</span>
|
||||||
|
<ArrowIcon className=" ml-2 mt-2"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GraphicSection.Foreground>
|
||||||
|
</GraphicSection.Root>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,48 @@
|
||||||
|
export const ArrowIcon = ({className}: {className?: string}) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="10"
|
||||||
|
height="10"
|
||||||
|
viewBox="0 0 10 10"
|
||||||
|
fill="none"
|
||||||
|
className={className}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<g clip-path="url(#clip0_61_133)">
|
||||||
|
<path
|
||||||
|
d="M3.30432 1.71807L8.28174 1.71826"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-opacity="0.75"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-miterlimit="10"
|
||||||
|
stroke-linecap="square"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8.28175 1.7183L8.28198 6.6958"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-opacity="0.75"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-miterlimit="10"
|
||||||
|
stroke-linecap="square"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M8.28149 1.71834L1.25024 8.74951"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-opacity="0.75"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-miterlimit="10"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_61_133">
|
||||||
|
<rect
|
||||||
|
width="10"
|
||||||
|
height="10"
|
||||||
|
fill="currentColor"
|
||||||
|
transform="translate(10.0007 9.99951) rotate(-180)"
|
||||||
|
/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
|
@ -23,8 +23,6 @@ const Feed = ({
|
||||||
initialData: Article[];
|
initialData: Article[];
|
||||||
}) => {
|
}) => {
|
||||||
const filters = ["latest", "day", "week", "month"] as const;
|
const filters = ["latest", "day", "week", "month"] as const;
|
||||||
const [dataResponse, setDataResponse] =
|
|
||||||
useState<Awaited<ReturnType<typeof fetchFeedData>>>();
|
|
||||||
const [content, setContent] = useState<NonNullable<Article[]>>(initialData);
|
const [content, setContent] = useState<NonNullable<Article[]>>(initialData);
|
||||||
const [selectedFilter, setSelectedFilter] =
|
const [selectedFilter, setSelectedFilter] =
|
||||||
useState<(typeof filters)[number]>("latest");
|
useState<(typeof filters)[number]>("latest");
|
||||||
|
@ -111,7 +109,7 @@ const Feed = ({
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{dataResponse?.next ? (
|
{swrData?.next ? (
|
||||||
<button
|
<button
|
||||||
className="bg-gray-600 text-gray-300 rounded-md p-2 px-4"
|
className="bg-gray-600 text-gray-300 rounded-md p-2 px-4"
|
||||||
onClick={handleLoadMore}
|
onClick={handleLoadMore}
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
const Root = ({className, children, href}: React.PropsWithChildren & {href:string,className?: string}) => {
|
||||||
|
return <a href={href} className={`block relative overflow-hidden w-full ${className}`}>{children}</a>
|
||||||
|
}
|
||||||
|
|
||||||
|
const Background = ({className, children}: React.PropsWithChildren & {className?: string}) => {
|
||||||
|
return <div className={`absolute w-full inset-0 z-0 ${className}`}>{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
const Foreground = ({className, children}: React.PropsWithChildren & {className?: string}) => {
|
||||||
|
return <div className={`absolute w-full h-full inset-0 z-10 ${className}`}>{children}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Root,
|
||||||
|
Background,
|
||||||
|
Foreground
|
||||||
|
}
|
|
@ -39,11 +39,27 @@ export async function fetchFeedData({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const articles = await prisma.article.findMany({
|
// Mocking the data instead of fetching from the database
|
||||||
...query,
|
const articles: Article[] = [
|
||||||
skip: current,
|
{
|
||||||
take: next,
|
id: 1,
|
||||||
});
|
title: "Mock Article 1",
|
||||||
|
slug: "This is a mock article.",
|
||||||
|
siteKey: "asdas",
|
||||||
|
url: "asdasd",
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Mock Article 2",
|
||||||
|
slug: "This is a mock article.",
|
||||||
|
siteKey: "asdas",
|
||||||
|
url: "asdasd",
|
||||||
|
createdAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const nextPointer = articles.length >= limit ? next + limit : null;
|
const nextPointer = articles.length >= limit ? next + limit : null;
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue