feat: all features are covered
This commit is contained in:
Juan Di Toro
parent
50ba72f950
commit
a7d124073f
132
src/app/page.tsx
132
src/app/page.tsx
|
|
@ -9,23 +9,35 @@ export default function Home() {
|
|||
return (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
<div className="flex flex-row flex-wrap justify-between w-full">
|
||||
<Feed />
|
||||
<Feed />
|
||||
<Feed />
|
||||
<div className="space-y-8 w-full my-10">
|
||||
<div className="flex flex-row flex-wrap justify-between w-full">
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue