LumeWeb
/
web3.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: all features are covered

This commit is contained in:
Juan Di Toro 2023-11-15 10:35:32 +01:00
parent 50ba72f950
commit a7d124073f
2 changed files with 122 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/app/page.tsx
View File

@ -9,23 +9,35 @@ export default function Home() {
return (
<>
<SearchBar />
<div className="space-y-8 w-full my-10">
<div className="flex flex-row flex-wrap justify-between w-full">
<Feed />
<Feed />
<Feed />
<Feed title="Latest from the community" icon={PaperIcon} className="w-[calc(33%-16px)] max-w-md" />
<Feed title="Rising Posts" icon={TrendUpIcon} className="w-[calc(33%-16px)] max-w-md" />
<Feed title="Top Posts" icon={TopArrowLodashIcon} className="w-[calc(33%-16px)] max-w-md" />
</div>
<Feed title="Another heading" icon={TrendUpIcon} className="w-full" variant="row" />
</div>
</>
)
}
const Feed = () => {
const Feed = ({
className,
variant = "col",
icon: Icon,
title
}: {
className?: string
variant?: "row" | "col"
title: string
icon: (props: React.HTMLAttributes<SVGAElement>) => React.ReactNode | JSX.Element
}) => {
return (
<section className="flex flex-col space-y-6 w-[calc(33%-24px)] max-w-md">
<section className={`flex flex-col space-y-6 ${className}`}>
<header className="flex flex-row space-x-3 items-start">
<PaperIcon className="text-primary mt-1" />
<Icon className="text-primary mt-1" />
<nav>
<h3 className="text-primary text-xl">Latest community posts</h3>
<h3 className="text-primary text-xl">{title}</h3>
<ul className="text-gray-400 text-sm list-none [&>li:hover]:cursor-pointer [&>li:hover]:text-white">
<li className="text-white inline after:content-['/'] after:mx-1 after:text-gray-400">
latest
@ -40,8 +52,40 @@ const Feed = () => {
</ul>
</nav>
</header>
<div className="@container space-y-4 w-full">
<article className="flex bg-gray-800 flex-col @md:flex-row justify-between w-full py-4 px-6 rounded">
<div className={`w-full flex gap-4 max-h-[400px] flex-${variant} ${variant === 'col' ? "overflow-y-auto" : "overflow-x-auto"}`}>
<article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
<span className="inline-block text-gray-500 w-full flex-1">
1h ago
</span>
<p className="inline-block text-white w-[25ch] flex-auto">
Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
</p>
</article>
<article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
<span className="inline-block text-gray-500 w-full flex-1">
1h ago
</span>
<p className="inline-block text-white w-[25ch] flex-auto">
Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
</p>
</article>
<article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
<span className="inline-block text-gray-500 w-full flex-1">
1h ago
</span>
<p className="inline-block text-white w-[25ch] flex-auto">
Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
</p>
</article>
<article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
<span className="inline-block text-gray-500 w-full flex-1">
1h ago
</span>
<p className="inline-block text-white w-[25ch] flex-auto">
Bitcoin (BTC) Price Prediction: When Will Bitcoin Reach $100,000?
</p>
</article>
<article className="flex bg-gray-800 flex-col justify-between w-full py-4 px-6 rounded">
<span className="inline-block text-gray-500 w-full flex-1">
1h ago
</span>
@ -54,7 +98,7 @@ const Feed = () => {
)
}
const PaperIcon = ({ className }: { className: string }) => {
const PaperIcon = ({ className }: { className?: string }) => {
return (
<svg
width="24"
@ -71,3 +115,67 @@ const PaperIcon = ({ className }: { className: string }) => {
</svg>
)
}
const TopArrowLodashIcon = ({ className }: { className?: string }) => {
return (
<svg
className={className}
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.0001 4.97949L16.7458 9.72518H7.25439L12.0001 4.97949Z"
fill="currentColor"
/>
<path
d="M12.7896 22.0004V8.23828H11.2106V22.0004H12.7896Z"
fill="currentColor"
/>
<path
d="M16.7456 3.57846V1.99951L7.25423 1.99951V3.57846L16.7456 3.57846Z"
fill="currentColor"
/>
</svg>
)
}
const TrendUpIcon = ({ className }: { className?: string }) => {
return (
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
className={className}
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_61_503)">
<path
d="M23.0769 6L13.5769 15.5L8.5769 10.5L1.0769 18"
stroke="#ACF9C0"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17.0769 6H23.0769V12"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_61_503">
<rect
width="24"
height="24"
fill="white"
transform="translate(0.0769043)"
/>
</clipPath>
</defs>
</svg>
)
}

5
src/components/SearchBar.tsx
View File

@ -14,10 +14,9 @@ import { usePathname, useSearchParams, useRouter } from "next/navigation"
import { formatDate, getResults } from "@/utils"
type Props = {
variant: "default" | "simplified"
}
const SearchBar = ({ variant }: Props) => {
const SearchBar = ({ }: Props) => {
const searchParams = useSearchParams()
const router = useRouter()
const pathname = usePathname()
@ -70,7 +69,7 @@ const SearchBar = ({ variant }: Props) => {
return (
<div
className={`w-full p-4 border-2 ${
className={`w-full mt-8 p-4 border-2 ${
results.length > 0 ? "border-sky-300 bg-gray-950" : "border-primary"
}`}
>