Skip to content

Commit 07aaad0

Browse files
ItsAbir005ItsAbir005
committed
refactor(sponsors): use class-only dark logo styling with single img
1 parent 7266379 commit 07aaad0

1 file changed

Lines changed: 42 additions & 70 deletions

File tree

‎src/components/Sponsors/Sponsors.jsx‎

Lines changed: 42 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,54 @@
1-
import { useEffect, useState } from "react";
2-
import AGChartsLogoDark from "../../assets/ag-charts-logo-dark.png";
31
import AGChartsLogo from "../../assets/ag-charts-logo.png";
4-
import AGLogoDark from "../../assets/ag-grid-logo-dark.png";
52
import AGLogo from "../../assets/ag-grid-logo.png";
63
import WebpackIcon from "../../assets/icon-square-small.svg";
74
import Link from "../Link/Link.jsx";
85

9-
const useThemeAsset = (lightSrc, darkSrc) => {
10-
const [asset, setAsset] = useState(lightSrc);
11-
12-
useEffect(() => {
13-
if (typeof document === "undefined") {
14-
return undefined;
15-
}
16-
17-
const root = document.documentElement;
18-
const setThemeAsset = () => {
19-
setAsset(root.dataset.theme === "dark" ? darkSrc : lightSrc);
20-
};
21-
22-
setThemeAsset();
23-
24-
const observer = new MutationObserver(setThemeAsset);
25-
observer.observe(root, {
26-
attributes: true,
27-
attributeFilter: ["data-theme"],
28-
});
29-
30-
return () => observer.disconnect();
31-
}, [darkSrc, lightSrc]);
32-
33-
return asset;
34-
};
35-
36-
const Sponsors = () => {
37-
const agGridLogo = useThemeAsset(AGLogo, AGLogoDark);
38-
const agChartsLogo = useThemeAsset(AGChartsLogo, AGChartsLogoDark);
39-
40-
return (
41-
<div className="absolute h-full w-[250px] -ml-[250px] mr-2">
42-
<div className="sticky hidden my-[1.5em] top-[6em] px-[1.5em] pb-[3em] flex-wrap justify-center items-start border-r-2 border-r-[#f2f2f2] overflow-hidden transition-colors duration-[250ms] min-[1525px]:flex">
43-
<div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
44-
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
45-
<img src={agGridLogo} alt="ag grid" width={220} loading="lazy" />
46-
</Link>
47-
</div>
48-
<div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
49-
<Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
6+
const Sponsors = () => (
7+
<div className="absolute h-full w-[250px] -ml-[250px] mr-2">
8+
<div className="sticky hidden my-[1.5em] top-[6em] px-[1.5em] pb-[3em] flex-wrap justify-center items-start border-r-2 border-r-[#f2f2f2] overflow-hidden transition-colors duration-[250ms] min-[1525px]:flex">
9+
<div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
10+
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
11+
<img
12+
className="dark:brightness-0 dark:invert"
13+
src={AGLogo}
14+
alt="ag grid"
15+
width={220}
16+
loading="lazy"
17+
/>
18+
</Link>
19+
</div>
20+
<div className="m-2 rounded-[8px] shadow-[0_3px_10px_0px_rgba(0,0,0,0.2)] transition-transform duration-200 hover:bg-[#f2f2f2] hover:scale-105 dark:bg-[rgb(12,12,12)] dark:shadow-[0_3px_10px_0px_rgba(255,255,255,0.2)] dark:hover:bg-[rgb(50,50,50)]">
21+
<Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
22+
<img
23+
className="dark:brightness-0 dark:invert"
24+
src={AGChartsLogo}
25+
alt="ag charts"
26+
width={220}
27+
loading="lazy"
28+
/>
29+
</Link>
30+
</div>
31+
<div>
32+
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
33+
<div className="my-4 text-center text-[2em] text-[#535353] dark:text-[#cecece]">
34+
Datagrid and Charting for Enterprise Applications
35+
</div>
36+
<div className="flex justify-center w-full">
5037
<img
51-
src={agChartsLogo}
52-
alt="ag charts"
53-
width={220}
38+
src={WebpackIcon}
39+
alt="webpack"
40+
width={150}
41+
height={150}
5442
loading="lazy"
5543
/>
56-
</Link>
57-
</div>
58-
<div>
59-
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
60-
<div className="my-4 text-center text-[2em] text-[#535353] dark:text-[#cecece]">
61-
Datagrid and Charting for Enterprise Applications
62-
</div>
63-
<div className="flex justify-center w-full">
64-
<img
65-
src={WebpackIcon}
66-
alt="webpack"
67-
width={150}
68-
height={150}
69-
loading="lazy"
70-
/>
71-
</div>
72-
<div className="my-4 text-center text-[1.7em] italic text-[#535353] dark:text-[#cecece]">
73-
Proud to partner with webpack
74-
</div>
75-
</Link>
76-
</div>
44+
</div>
45+
<div className="my-4 text-center text-[1.7em] italic text-[#535353] dark:text-[#cecece]">
46+
Proud to partner with webpack
47+
</div>
48+
</Link>
7749
</div>
7850
</div>
79-
);
80-
};
51+
</div>
52+
);
8153

8254
export default Sponsors;

0 commit comments

Comments
 (0)