feat(web): increase recently added icons display count and adjust marquee speed

This commit is contained in:
Thomas Camlong
2025-11-28 10:47:43 +01:00
parent f97626d5d5
commit 556f3f8cb9
3 changed files with 5 additions and 7 deletions

View File

@@ -14,7 +14,7 @@ async function getGitHubStars() {
export default async function Home() {
const { totalIcons } = await getTotalIcons()
const recentIcons = await getRecentlyAddedIcons(10)
const recentIcons = await getRecentlyAddedIcons(20)
const stars = await getGitHubStars()
return (

View File

@@ -512,15 +512,13 @@ export function IconDetails({ icon, iconData, authorData, allIcons, status, stat
<div className="flex items-center gap-2">
<div className="flex items-center gap-2">
<p className="text-sm font-medium">By:</p>
<Avatar className="h-5 w-5 border">
<Avatar className="h-6 w-6 border">
<AvatarImage
src={authorData.avatar_url}
alt={`${authorName}'s avatar`}
/>
<AvatarFallback>
{authorName
? authorName.slice(0, 2).toUpperCase()
: "??"}
{authorName?.slice(0, 1).toUpperCase()}
</AvatarFallback>
</Avatar>
{authorData.html_url && (

View File

@@ -38,7 +38,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
</div>
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
<Marquee pauseOnHover className="[--duration:60s] [--gap:1em] motion-safe:motion-preset-slide-left-sm motion-duration-1000">
<Marquee pauseOnHover className="[--duration:90s] [--gap:1em] motion-safe:motion-preset-slide-left-sm motion-duration-1000">
{firstRow.map(({ name, data }) => (
<RecentIconCard key={name} name={name} data={data} />
))}
@@ -46,7 +46,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
<Marquee
reverse
pauseOnHover
className="[--duration:60s] [--gap:1rem] motion-safe:motion-preset-slide-right-sm motion-duration-1000"
className="[--duration:90s] [--gap:1rem] motion-safe:motion-preset-slide-right-sm motion-duration-1000"
>
{secondRow.map(({ name, data }) => (
<RecentIconCard key={name} name={name} data={data} />