Skip to content

Commit 7266379

Browse files
ItsAbir005ItsAbir005
committed
feat(sponsors): use single theme-aware logo image in Sponsors component
1 parent 1e0faf6 commit 7266379

1 file changed

Lines changed: 68 additions & 56 deletions

File tree

‎src/components/Sponsors/Sponsors.jsx‎

Lines changed: 68 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,82 @@
1+
import { useEffect, useState } from "react";
12
import AGChartsLogoDark from "../../assets/ag-charts-logo-dark.png";
23
import AGChartsLogo from "../../assets/ag-charts-logo.png";
34
import AGLogoDark from "../../assets/ag-grid-logo-dark.png";
45
import AGLogo from "../../assets/ag-grid-logo.png";
56
import WebpackIcon from "../../assets/icon-square-small.svg";
67
import Link from "../Link/Link.jsx";
78

8-
const Sponsors = () => (
9-
<div className="absolute h-full w-[250px] -ml-[250px] mr-2">
10-
<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">
11-
<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)]">
12-
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
13-
<img
14-
className="block dark:hidden"
15-
src={AGLogo}
16-
alt="ag grid"
17-
width={220}
18-
loading="lazy"
19-
/>
20-
<img
21-
className="hidden dark:block"
22-
src={AGLogoDark}
23-
alt="ag grid"
24-
width={220}
25-
loading="lazy"
26-
/>
27-
</Link>
28-
</div>
29-
<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)]">
30-
<Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
31-
<img
32-
className="block dark:hidden"
33-
src={AGChartsLogo}
34-
alt="ag charts"
35-
width={220}
36-
loading="lazy"
37-
/>
38-
<img
39-
className="hidden dark:block"
40-
src={AGChartsLogoDark}
41-
alt="ag charts"
42-
width={220}
43-
loading="lazy"
44-
/>
45-
</Link>
46-
</div>
47-
<div>
48-
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
49-
<div className="my-4 text-center text-[2em] text-[#535353] dark:text-[#cecece]">
50-
Datagrid and Charting for Enterprise Applications
51-
</div>
52-
<div className="flex justify-center w-full">
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">
5350
<img
54-
src={WebpackIcon}
55-
alt="webpack"
56-
width={150}
57-
height={150}
51+
src={agChartsLogo}
52+
alt="ag charts"
53+
width={220}
5854
loading="lazy"
5955
/>
60-
</div>
61-
<div className="my-4 text-center text-[1.7em] italic text-[#535353] dark:text-[#cecece]">
62-
Proud to partner with webpack
63-
</div>
64-
</Link>
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>
6577
</div>
6678
</div>
67-
</div>
68-
);
79+
);
80+
};
6981

7082
export default Sponsors;

0 commit comments

Comments
 (0)