Skip to content

Commit 5ff894a

Browse files
hasanharmanhasanharman
committed
Feature: sponsors added
1 parent 7a70e3f commit 5ff894a

File tree

4 files changed

+145
-31
lines changed

4 files changed

+145
-31
lines changed

‎components/animated-tooltip.tsx

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
'use client'
2+
import Image from 'next/image'
3+
import React, { useState } from 'react'
4+
import {
5+
motion,
6+
useTransform,
7+
AnimatePresence,
8+
useMotionValue,
9+
useSpring,
10+
} from 'framer-motion'
11+
12+
export const AnimatedTooltip = ({
13+
items,
14+
}: {
15+
items: {
16+
id: number
17+
name: string
18+
designation: string
19+
image: string
20+
}[]
21+
}) => {
22+
const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
23+
const springConfig = { stiffness: 100, damping: 5 }
24+
const x = useMotionValue(0) // going to set this value on mouse move
25+
// rotate the tooltip
26+
const rotate = useSpring(
27+
useTransform(x, [-100, 100], [-45, 45]),
28+
springConfig,
29+
)
30+
// translate the tooltip
31+
const translateX = useSpring(
32+
useTransform(x, [-100, 100], [-50, 50]),
33+
springConfig,
34+
)
35+
const handleMouseMove = (event: any) => {
36+
const halfWidth = event.target.offsetWidth / 2
37+
x.set(event.nativeEvent.offsetX - halfWidth) // set the x value, which is then used in transform and rotate
38+
}
39+
40+
return (
41+
<>
42+
{items.map((item, idx) => (
43+
<div
44+
className="-mr-4 relative group"
45+
key={item.name}
46+
onMouseEnter={() => setHoveredIndex(item.id)}
47+
onMouseLeave={() => setHoveredIndex(null)}
48+
>
49+
<AnimatePresence mode="popLayout">
50+
{hoveredIndex === item.id && (
51+
<motion.div
52+
initial={{ opacity: 0, y: 20, scale: 0.6 }}
53+
animate={{
54+
opacity: 1,
55+
y: 0,
56+
scale: 1,
57+
transition: {
58+
type: 'spring',
59+
stiffness: 260,
60+
damping: 10,
61+
},
62+
}}
63+
exit={{ opacity: 0, y: 20, scale: 0.6 }}
64+
style={{
65+
translateX: translateX,
66+
rotate: rotate,
67+
whiteSpace: 'nowrap',
68+
}}
69+
className="absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2"
70+
>
71+
<div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
72+
<div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
73+
<div className="font-bold text-white relative z-30 text-base">
74+
{item.name}
75+
</div>
76+
<div className="text-white text-xs">{item.designation}</div>
77+
</motion.div>
78+
)}
79+
</AnimatePresence>
80+
<Image
81+
onMouseMove={handleMouseMove}
82+
height={100}
83+
width={100}
84+
src={item.image}
85+
alt={item.name}
86+
className="object-cover !m-0 !p-0 object-top rounded-full h-10 w-10 border-2 group-hover:scale-105 group-hover:z-30 border-white relative transition duration-500"
87+
/>
88+
</div>
89+
))}
90+
</>
91+
)
92+
}

‎components/sections/hero/index.tsx

+46-25
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { NumberTicker } from '@/components/number-ticker'
1313
import { LuStar, LuHeart } from 'react-icons/lu'
1414
import StarIcon from '@/components/star-icon'
1515
import HeartIcon from '@/components/hearth-icon'
16+
import { AnimatedTooltip } from '@/components/animated-tooltip'
1617

1718
const ease = [0.16, 1, 0.3, 1]
1819

@@ -74,41 +75,61 @@ function HeroPill() {
7475
fetchGitHubData()
7576
}, [])
7677

78+
const sponsors = [
79+
{
80+
id: 1,
81+
name: 'Maxim Ciebiera',
82+
designation: 'Founder - datatino.de',
83+
image: 'https://avatars.githubusercontent.com/u/47557243?v=4',
84+
},
85+
{
86+
id: 2,
87+
name: 'Radu Ciocan',
88+
designation: 'React Native Developer',
89+
image: 'https://avatars.githubusercontent.com/u/4984377?v=4',
90+
},
91+
]
92+
7793
return (
7894
<motion.div
7995
initial={{ opacity: 0, y: -20 }}
8096
animate={{ opacity: 1, y: 0 }}
8197
transition={{ duration: 0.8, ease }}
8298
className="flex items-center"
8399
>
84-
<div className="space-y-1">
100+
<div className="space-y-3">
85101
<p className="text-center text-xs text-muted-foreground">
86102
Last Update {stats.lastUpdate}
87103
</p>
88-
<div className={cn('z-10 flex -space-x-12 rtl:space-x-reverse')}>
89-
<Link
90-
href="https://github.com/sponsors/hasanharman"
91-
target="_blank"
92-
className="group"
93-
>
94-
<Button className="h-10 w-[9.5rem] flex justify-start rounded-full border-2 border-white dark:border-gray-800 shadow">
95-
<HeartIcon />
96-
Sponsor
97-
</Button>
98-
</Link>
99-
<Link
100-
href="https://github.com/hasanharman/form-builder"
101-
target="_blank"
102-
className="h-10 cursor-pointer flex w-auto items-center space-x-1 rounded-full bg-muted px-3 group border-2 border-white whitespace-pre shadow hover:shadow-lg"
103-
>
104-
<p className="font-medium text-primary text-sm">
105-
Star Project on GitHub
106-
</p>
107-
<div className="flex items-center rounded-full px-2 py-1 text-center font-medium text-sm ">
108-
<StarIcon />
109-
<NumberTicker className="ml-1" value={stats.stars} />
110-
</div>
111-
</Link>
104+
<div className="flex gap-5">
105+
<div className="flex flex-row items-center justify-center w-full">
106+
<AnimatedTooltip items={sponsors} />
107+
</div>
108+
<div className={cn('z-10 flex -space-x-12 rtl:space-x-reverse')}>
109+
<Link
110+
href="https://github.com/sponsors/hasanharman"
111+
target="_blank"
112+
className="group"
113+
>
114+
<Button className="h-10 w-[9.5rem] flex justify-start rounded-full border-2 border-white dark:border-gray-800 shadow">
115+
<HeartIcon />
116+
Sponsor
117+
</Button>
118+
</Link>
119+
<Link
120+
href="https://github.com/hasanharman/form-builder"
121+
target="_blank"
122+
className="h-10 cursor-pointer flex w-auto items-center space-x-1 rounded-full bg-muted px-3 group border-2 border-white whitespace-pre shadow hover:shadow-lg"
123+
>
124+
<p className="font-medium text-primary text-sm">
125+
Star Project on GitHub
126+
</p>
127+
<div className="flex items-center rounded-full px-2 py-1 text-center font-medium text-sm ">
128+
<StarIcon />
129+
<NumberTicker className="ml-1" value={stats.stars} />
130+
</div>
131+
</Link>
132+
</div>
112133
</div>
113134
</div>
114135
</motion.div>

‎next.config.mjs

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const nextConfig = {
3333
'randomuser.me',
3434
'avatars.githubusercontent.com',
3535
'pbs.twimg.com',
36+
'images.unsplash.com',
3637
],
3738
},
3839
}

‎public/sitemap-0.xml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3-
<url><loc>https://www.shadcn-form.com/readme</loc><lastmod>2024-11-17T18:01:22.441Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4-
<url><loc>https://www.shadcn-form.com/templates</loc><lastmod>2024-11-17T18:01:22.442Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5-
<url><loc>https://www.shadcn-form.com/components</loc><lastmod>2024-11-17T18:01:22.442Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6-
<url><loc>https://www.shadcn-form.com</loc><lastmod>2024-11-17T18:01:22.442Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7-
<url><loc>https://www.shadcn-form.com/test</loc><lastmod>2024-11-17T18:01:22.442Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8-
<url><loc>https://www.shadcn-form.com/playground</loc><lastmod>2024-11-17T18:01:22.442Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
3+
<url><loc>https://www.shadcn-form.com/readme</loc><lastmod>2024-11-27T19:41:26.704Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4+
<url><loc>https://www.shadcn-form.com</loc><lastmod>2024-11-27T19:41:26.705Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5+
<url><loc>https://www.shadcn-form.com/test</loc><lastmod>2024-11-27T19:41:26.705Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6+
<url><loc>https://www.shadcn-form.com/components</loc><lastmod>2024-11-27T19:41:26.705Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7+
<url><loc>https://www.shadcn-form.com/templates</loc><lastmod>2024-11-27T19:41:26.705Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8+
<url><loc>https://www.shadcn-form.com/playground</loc><lastmod>2024-11-27T19:41:26.705Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
99
</urlset>

0 commit comments

Comments
 (0)