Skip to content

Commit

Permalink
UI updates to research cards (#471)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivntsng
ivntsng authored Oct 12, 2024
1 parent 8896c26 commit e749e09
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 52 deletions.
41 changes: 29 additions & 12 deletions frontend/src/components/nav/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const Navbar = () => {
path: "/research",
icon: <FaWpexplorer className="h-5 w-5" />,
description: "",
isExternal: false,
},
];

Expand All @@ -67,28 +68,43 @@ const Navbar = () => {
title,
children,
icon,
isExternal,
}: {
className?: string;
href: string;
title: string;
children: string;
icon: React.ReactNode;
isExternal: boolean;
}) => {
return (
<li>
<NavigationMenuLink asChild>
<a
href={href}
className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex items-center text-sm font-semibold leading-none">
<span className="mr-2">{icon}</span>
<span>{title}</span>
</div>
<p className="line-clamp-2 text-sm leading-snug">{children}</p>
</a>
{isExternal ? (
<a
href={href}
className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
target="_blank"
rel="noopener noreferrer"
>
<div className="flex items-center text-sm font-semibold leading-none">
<span className="mr-2">{icon}</span>
<span>{title}</span>
</div>
<p className="line-clamp-2 text-sm leading-snug">{children}</p>
</a>
) : (
<Link
to={href}
className={`block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-gray-1 hover:text-primary-9 focus:bg-gray-1 focus:text-primary-9 ${className}`}
>
<div className="flex items-center text-sm font-semibold leading-none">
<span className="mr-2">{icon}</span>
<span>{title}</span>
</div>
<p className="line-clamp-2 text-sm leading-snug">{children}</p>
</Link>
)}
</NavigationMenuLink>
</li>
);
Expand Down Expand Up @@ -156,6 +172,7 @@ const Navbar = () => {
href={item.path}
icon={item.icon}
className="group"
isExternal={item.isExternal !== false}
>
{item.description}
</ListItem>
Expand Down
80 changes: 40 additions & 40 deletions frontend/src/components/pages/ResearchPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const MediumArticles: React.FC = () => {
}

return (
<div className="container mx-auto mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-6">
<div className="container mx-auto mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 p-6">
{articles.map((article, index) => (
<MediumCard key={index} article={article} />
))}
Expand Down Expand Up @@ -91,54 +91,54 @@ const MediumCard: React.FC<{ article: ResearchPost }> = ({ article }) => {
: "https://miro.medium.com/v2/resize:fill:40:40/1*REeM2VDUPg7VWMU1UwnsBw.png";

return (
<div className="max-w-md mx-auto p-4 bg-white rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300">
<div className="eu m ev ew ex ey">
<a
href={article.link}
className="flex mb-4"
style={{ position: "relative" }}
>
<div className="max-w-full p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-transform duration-300 ease-in-out hover:-translate-y-1 flex flex-col h-full">
<a
href={article.link}
className="flex mb-4"
style={{ position: "relative" }}
>
<img
src={randomImage}
alt={article.title}
className="w-full h-56 object-cover rounded-t-lg"
onError={(e) => {
(e.target as HTMLImageElement).src = fallbackImage;
}}
/>
</a>

<div className="flex-grow p-4 flex flex-col">
<div className="flex items-center mb-4">
<img
src={randomImage}
alt={article.title}
className="m ke kf kg kh w-full object-cover rounded-t-lg h-56"
onError={(e) => {
(e.target as HTMLImageElement).src = fallbackImage;
}}
src={authorImage}
alt={article.author}
className="rounded-full h-10 w-10"
/>
</a>

<div className="p-4">
<div className="flex items-center mb-4">
<img
src={authorImage}
alt={article.author}
className="rounded-full h-10 w-10"
/>
<div className="ml-3">
<p className="text-gray-700 font-bold">{article.author}</p>
<p className="text-sm text-gray-500">
{new Date(article.pubDate).toLocaleDateString()}
</p>
</div>
</div>

<a href={article.link} className="block">
<h2 className="text-xl font-semibold text-gray-900 mb-2 hover:underline">
{article.title}
</h2>
<p className="text-sm text-gray-600 line-clamp-3 mb-4">
{article.description.replace(/<\/?[^>]+(>|$)/g, "")}
<div className="ml-3">
<p className="text-gray-700 font-bold text-base">
{article.author}
</p>
</a>
<p className="text-sm text-gray-500">
{new Date(article.pubDate).toLocaleDateString()}
</p>
</div>
</div>

<div className="flex justify-between items-center">
<a href={article.link} className="block flex-grow">
<h2 className="text-xl font-semibold text-gray-900 mb-2 hover:underline">
{article.title}
</h2>
<p className="text-base text-gray-600 line-clamp-3 mb-4">
{article.description.replace(/<\/?[^>]+(>|$)/g, "")}
</p>
</a>

<div className="flex justify-between items-center mt-auto">
<a
href={article.link}
target="_blank"
rel="noopener noreferrer"
className="text-indigo-600 hover:text-indigo-800 text-sm font-medium"
className="text-indigo-600 hover:text-indigo-800 text-sm font-medium whitespace-nowrap"
>
Read More
</a>
Expand Down

0 comments on commit e749e09

Please sign in to comment.