Skip to content

Commit 7577231

Browse files
red-panda3red-panda3
committed
Hover Footer
1 parent 1544815 commit 7577231

File tree

1 file changed

+24
-16
lines changed

1 file changed

+24
-16
lines changed

‎src/components/Footer.tsx

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const CustomFooter: React.FC = () => {
1919
const year = new Date().getFullYear();
2020
const screens = useBreakpoint();
2121
const [expanded, setExpanded] = useState(false);
22-
22+
const [hover, setHover] = useState(false);
23+
const[hovericon,sethoverIcon]=useState(0)
2324
return (
2425
<Footer
2526
id="footer"
@@ -32,12 +33,15 @@ const CustomFooter: React.FC = () => {
3233
<Row justify="space-between" align="middle" gutter={[16, 16]}>
3334
<Col xs={24} md={12}>
3435
<Space direction="vertical" size="middle">
35-
<Link href="https://www.accordproject.org" target="_blank">
36+
<Link href="https://www.accordproject.org" target="_blank"
37+
onMouseEnter={() => setHover(true)} // Detect hover
38+
onMouseLeave={() => setHover(false)} // Detect when hover ends
39+
>
3640
<Image
3741
src="/logo.png"
3842
alt="Template Playground"
3943
preview={false}
40-
style={{ height: "36px", maxWidth: "100%" }}
44+
style={{ height: hover ? "38px":"36px", maxWidth: "100%" }}
4145
/>
4246
</Link>
4347
<Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
@@ -48,17 +52,19 @@ const CustomFooter: React.FC = () => {
4852
[email protected]
4953
</Text>
5054
</Link>
51-
<Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
55+
<Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" >
5256
<Button
5357
size="large"
5458
style={{
5559
padding: "5px 30px",
56-
backgroundColor: "#19c6c7",
60+
backgroundColor:hovericon==2 ?'#D3D3D3': "#19c6c7",
5761
borderRadius: "5px",
5862
color: "#050c40",
5963
textAlign: "center",
6064
border: "none",
6165
}}
66+
onMouseEnter={()=>sethoverIcon(2)}
67+
onMouseLeave={()=>sethoverIcon(0)}
6268
>
6369
Join
6470
</Button>
@@ -79,24 +85,26 @@ const CustomFooter: React.FC = () => {
7985

8086
{(screens.md || expanded) && (
8187
<Row justify="end" gutter={[16, 16]}>
82-
{FOOTER_SECTION.sections.map((section: FooterSection) => (
88+
{FOOTER_SECTION.sections.map((section: FooterSection,j:number) => (
8389
<Col xs={24} sm={12} md={6} key={section.title}>
8490
<Space direction="vertical" size="middle">
8591
<Text
8692
strong
8793
style={{
88-
color: "rgba(255, 255, 255, 0.65)",
94+
color: "rgba(255, 255, 255, 0.85)",
8995
fontSize: "11px",
9096
letterSpacing: "0.1em",
9197
}}
9298
>
9399
{section.title}
94100
</Text>
95-
{section.links.map((link: FooterLink) => (
101+
{section.links.map((link: FooterLink,i:number) => (
96102
<Link
97103
href={link.href}
98-
key={link.title}
99-
style={{ color: "white", fontSize: "15px" }}
104+
key={i}
105+
style={{ color: hovericon==(2*i+1)*(3*j+1)+10? "#A9A9A9":"white", fontSize: "15px" }}
106+
onMouseEnter={()=>sethoverIcon((2*i+1)*(3*j+1)+10)}
107+
onMouseLeave={()=>sethoverIcon(0)}
100108
>
101109
{link.title}
102110
</Link>
@@ -117,7 +125,7 @@ const CustomFooter: React.FC = () => {
117125
strong
118126
href="https://accordproject.org/privacy"
119127
target="_blank"
120-
style={{ color: "rgba(255, 255, 255, 0.85)" }}
128+
style={{ color:hovericon==3 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(3)} onMouseLeave={()=>sethoverIcon(0)}
121129
>
122130
trademark policy
123131
</Link>{" "}
@@ -126,7 +134,7 @@ const CustomFooter: React.FC = () => {
126134
strong
127135
href="https://accordproject.org/brand-assets"
128136
target="_blank"
129-
style={{ color: "rgba(255, 255, 255, 0.85)" }}
137+
style={{ color:hovericon==4 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(4)} onMouseLeave={()=>sethoverIcon(0)}
130138
>
131139
brand assets
132140
</Link>
@@ -135,16 +143,16 @@ const CustomFooter: React.FC = () => {
135143

136144
<Col>
137145
<Space>
138-
<Link href="https://github.com/accordproject" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
146+
<Link href="https://github.com/accordproject" target="_blank" style={{ color:hovericon==5 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(5)} onMouseLeave={()=>sethoverIcon(0)}>
139147
<GithubOutlined style={{ fontSize: "17px" }} />
140148
</Link>
141-
<Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
149+
<Link href="https://twitter.com/AccordHQ" target="_blank" style={{ color:hovericon==6 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(6)} onMouseLeave={()=>sethoverIcon(0)}>
142150
<XOutlined style={{ fontSize: "17px" }} />
143151
</Link>
144-
<Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
152+
<Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank" style={{ color:hovericon==7 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(7)} onMouseLeave={()=>sethoverIcon(0)}>
145153
<DiscordFilled style={{ fontSize: "17px" }} />
146154
</Link>
147-
<Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color: "rgba(255, 255, 255, 0.85)" }}>
155+
<Link href="https://www.linkedin.com/company/accordproject/" target="_blank" style={{ color:hovericon==7 ? " rgba(200,222,255,0.75) ": "rgba(255, 255, 255, 0.85)" }} onMouseEnter={()=>sethoverIcon(7)} onMouseLeave={()=>sethoverIcon(0)}>
148156
<LinkedinFilled style={{ fontSize: "17px" }} />
149157
</Link>
150158
</Space>

0 commit comments

Comments
 (0)