87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
'use client';
|
|
import { useEffect, useState } from 'react';
|
|
import { Eye, Share2, Clock, Feather } from 'lucide-react';
|
|
import axios from 'axios';
|
|
|
|
interface Discover {
|
|
id?: string;
|
|
title: string;
|
|
content: string;
|
|
url: string;
|
|
}
|
|
|
|
const Page = () => {
|
|
const [discover, setDiscover] = useState<Discover[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await axios.get(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/discover`,
|
|
);
|
|
setDiscover(response.data);
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="flex items-center">
|
|
<Feather />
|
|
<h1 className="text-3xl font-medium p-2">Discover</h1>
|
|
</div>
|
|
<hr className="border-t-2 border-[#2B2C2C] my-4 w-full" />
|
|
</div>
|
|
|
|
{discover &&
|
|
discover?.map((item, index) => (
|
|
<>
|
|
<div className="p-4 flex gap-4" key={index}>
|
|
<div>
|
|
<img
|
|
src={`https://s2.googleusercontent.com/s2/favicons?domain_url=${item.url}`}
|
|
alt=""
|
|
className="h-10 w-auto"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<div className="text-md font-semibold">{item.title}</div>
|
|
<div className="text-[#8D9191]">{item.content}</div>
|
|
<div className="flex flex-row gap-6 text-[#8D9191]">
|
|
<div className="flex gap-1 justify-center items-center">
|
|
<div>
|
|
<Eye size={16} />
|
|
</div>
|
|
<div>15744</div>
|
|
</div>
|
|
<div className="flex gap-1 justify-center items-center">
|
|
<div>
|
|
<Share2 size={16} />
|
|
</div>
|
|
<div>154</div>
|
|
</div>
|
|
<div className="flex gap-1 justify-center items-center">
|
|
<div>
|
|
<Clock size={16} />
|
|
</div>
|
|
<div>15</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr className="border-t-1 border-[#2B2C2C] my-1 w-full" />
|
|
</>
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Page;
|