Skip to content

Commit 50fc75f

Browse files
vishwansh01vishwansh01
authored
Merge branch 'main' into 1885/Consistent-use-of-Image-component
2 parents 3e61bd1 + 8c303e7 commit 50fc75f

File tree

1 file changed

+82
-91
lines changed

1 file changed

+82
-91
lines changed

‎pages/index.page.tsx‎

Lines changed: 82 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useMemo, useState } from 'react';
22
import { getLayout } from '../components/SiteLayout';
33
import { DocSearch } from '@docsearch/react';
44
import fs from 'fs';
@@ -93,79 +93,67 @@ const Home = (props: any) => {
9393
const timeToRead = Math.ceil(readingTime(blogPosts[0].content).minutes);
9494
const { resolvedTheme } = useTheme();
9595

96-
const [asyncapi_logo, setAsyncapi_logo] = useState('');
97-
const [vpsserver_logo, setVPSserver_logo] = useState('');
98-
const [airbnb_logo, setAirbnb_logo] = useState('');
99-
const [postman_logo, setPostman_logo] = useState('');
100-
const [itflashcards_logo, setItflashcards_logo] = useState('');
101-
const [route4me_logo, setRoute4me_logo] = useState('');
102-
const [n8n_logo, setN8n_logo] = useState('');
103-
const [endjin_logo, setEndjin_logo] = useState('');
104-
const [llc_logo, setLlc_logo] = useState('');
105-
const [common_room_logo, setCommon_room_logo] = useState('');
106-
const [slack_logo, setSlack_logo] = useState('');
107-
const [ccopter_logo, setCCopter_logo] = useState('');
10896
const [isClient, setIsClient] = useState(false);
109-
const [octue_logo, setOctue_logo] = useState('');
110-
const [apideck_logo, setApideck_logo] = useState('');
111-
const [rxdb_logo, setRxdb_logo] = useState('');
112-
const [wda_logo, setWDA_logo] = useState('');
113-
const [anon_logo, setAnon_logo] = useState('');
114-
const [sourcemeta_logo, setSourcemeta_logo] = useState('');
115-
const [dottxt_logo, setDottxt_logo] = useState('');
116-
const [supadata_logo, setSupadata_logo] = useState('');
117-
const [devevents_logo, setDevevents_logo] = useState('');
11897

11998
useEffect(() => {
12099
// Ensure the component is only rendered client-side
121100
setIsClient(true);
122101
}, []);
123-
useEffect(() => {
124-
if (resolvedTheme === 'dark') {
125-
setAsyncapi_logo('/img/logos/dark-mode/asyncapi_white.svg');
126-
setAirbnb_logo('/img/logos/dark-mode/airbnb_white.png');
127-
setPostman_logo('/img/logos/usedby/postman-white.png');
128-
setEndjin_logo('/img/logos/sponsors/endjin-logo.svg');
129-
setLlc_logo('/img/logos/dark-mode/llc_white.svg');
130-
setCommon_room_logo('/img/logos/dark-mode/common-room_white.svg');
131-
setSlack_logo('/img/logos/dark-mode/slack_white.svg');
132-
setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
133-
setItflashcards_logo('/img/logos/sponsors/it_flashcards-white.svg');
134-
setRoute4me_logo('/img/logos/sponsors/route4me-logo-dark.svg');
135-
setN8n_logo('/img/logos/sponsors/n8n-logo-dark.svg');
136-
setCCopter_logo('/img/logos/sponsors/copycopter-white.png');
137-
setOctue_logo('/img/logos/sponsors/octue-white.svg');
138-
setApideck_logo('/img/logos/sponsors/apideck-white.svg');
139-
setRxdb_logo('/img/logos/sponsors/rxdb.svg');
140-
setWDA_logo('/img/logos/sponsors/wda-dark.svg');
141-
setAnon_logo('/img/logos/sponsors/anon-white.png');
142-
setSourcemeta_logo('/img/logos/sponsors/sourcemeta-logo-light.svg');
143-
setDottxt_logo('/img/logos/sponsors/dottxt-logo-white.svg');
144-
setSupadata_logo('/img/logos/sponsors/supadata-logo-light.svg');
145-
setDevevents_logo('/img/logos/dark-mode/dev_events_logo.png');
146-
} else {
147-
setAsyncapi_logo('/img/logos/sponsors/asyncapi-logo-dark.svg');
148-
setAirbnb_logo('/img/logos/sponsors/airbnb-logo.png');
149-
setPostman_logo('/img/logos/sponsors/postman_logo-orange.svg');
150-
setEndjin_logo('/img/logos/sponsors/endjin-logo.svg');
151-
setLlc_logo('/img/logos/sponsors/llc-logo.svg');
152-
setCommon_room_logo('/img/logos/supported/common-room.svg');
153-
setSlack_logo('/img/logos/supported/slack-logo.svg');
154-
setVPSserver_logo('/img/logos/sponsors/vps-server-logo.svg');
155-
setItflashcards_logo('/img/logos/sponsors/it_flashcards.svg');
156-
setRoute4me_logo('/img/logos/sponsors/route4me-logo-white.svg');
157-
setN8n_logo('/img/logos/sponsors/n8n-logo-white.svg');
158-
setCCopter_logo('/img/logos/sponsors/copycopter.png');
159-
setOctue_logo('/img/logos/sponsors/octue-black.svg');
160-
setApideck_logo('/img/logos/sponsors/apideck.svg');
161-
setRxdb_logo('/img/logos/sponsors/rxdb.svg');
162-
setWDA_logo('/img/logos/sponsors/wda.svg');
163-
setAnon_logo('/img/logos/sponsors/anon-black.png');
164-
setSourcemeta_logo('/img/logos/sponsors/sourcemeta-logo-dark.svg');
165-
setSupadata_logo('/img/logos/sponsors/supadata-logo-dark.svg');
166-
setDottxt_logo('/img/logos/sponsors/dottxt-logo-dark.svg');
167-
}
168-
}, [resolvedTheme]);
102+
const LOGOS_PATHS = {
103+
darkLogos: {
104+
asyncapi: '/img/logos/dark-mode/asyncapi_white.svg',
105+
airbnb: '/img/logos/dark-mode/airbnb_white.png',
106+
postman: '/img/logos/usedby/postman-white.png',
107+
endjin: '/img/logos/sponsors/endjin-logo.svg',
108+
llc: '/img/logos/dark-mode/llc_white.svg',
109+
common_room: '/img/logos/dark-mode/common-room_white.svg',
110+
slack: '/img/logos/dark-mode/slack_white.svg',
111+
vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
112+
itflashcards: '/img/logos/sponsors/it_flashcards-white.svg',
113+
route4me: '/img/logos/sponsors/route4me-logo-dark.svg',
114+
n8n: '/img/logos/sponsors/n8n-logo-dark.svg',
115+
ccopter: '/img/logos/sponsors/copycopter-white.png',
116+
octue: '/img/logos/sponsors/octue-white.svg',
117+
apideck: '/img/logos/sponsors/apideck-white.svg',
118+
rxdb: '/img/logos/sponsors/rxdb.svg',
119+
wda: '/img/logos/sponsors/wda-dark.svg',
120+
anon: '/img/logos/sponsors/anon-white.png',
121+
sourcemeta: '/img/logos/sponsors/sourcemeta-logo-light.svg',
122+
dottxt: '/img/logos/sponsors/dottxt-logo-white.svg',
123+
supadata: '/img/logos/sponsors/supadata-logo-light.svg',
124+
devevents: '/img/logos/dark-mode/dev_events_logo.png',
125+
},
126+
lightLogos: {
127+
asyncapi: '/img/logos/sponsors/asyncapi-logo-dark.svg',
128+
airbnb: '/img/logos/sponsors/airbnb-logo.png',
129+
postman: '/img/logos/sponsors/postman_logo-orange.svg',
130+
endjin: '/img/logos/sponsors/endjin-logo.svg',
131+
llc: '/img/logos/sponsors/llc-logo.svg',
132+
common_room: '/img/logos/supported/common-room.svg',
133+
slack: '/img/logos/supported/slack-logo.svg',
134+
vpsserver: '/img/logos/sponsors/vps-server-logo.svg',
135+
itflashcards: '/img/logos/sponsors/it_flashcards.svg',
136+
route4me: '/img/logos/sponsors/route4me-logo-white.svg',
137+
n8n: '/img/logos/sponsors/n8n-logo-white.svg',
138+
ccopter: '/img/logos/sponsors/copycopter.png',
139+
octue: '/img/logos/sponsors/octue-black.svg',
140+
apideck: '/img/logos/sponsors/apideck.svg',
141+
rxdb: '/img/logos/sponsors/rxdb.svg',
142+
wda: '/img/logos/sponsors/wda.svg',
143+
anon: '/img/logos/sponsors/anon-black.png',
144+
sourcemeta: '/img/logos/sponsors/sourcemeta-logo-dark.svg',
145+
supadata: '/img/logos/sponsors/supadata-logo-dark.svg',
146+
dottxt: '/img/logos/sponsors/dottxt-logo-dark.svg',
147+
devevents: '/img/logos/dark-mode/dev_events_logo.png',
148+
},
149+
};
150+
151+
const logos = useMemo(
152+
() =>
153+
LOGOS_PATHS[resolvedTheme == 'dark' ? 'darkLogos' : 'lightLogos'] ||
154+
LOGOS_PATHS.lightLogos,
155+
[resolvedTheme],
156+
);
169157
return (
170158
<div>
171159
<div className='flex flex-col items-center'>
@@ -697,7 +685,7 @@ const Home = (props: any) => {
697685
{isClient && (
698686
<>
699687
<Image
700-
src={asyncapi_logo}
688+
src={logos.asyncapi}
701689
className='w-44 transition-transform duration-300 hover:scale-105'
702690
width={176}
703691
height={100}
@@ -714,7 +702,7 @@ const Home = (props: any) => {
714702
{isClient && (
715703
<>
716704
<Image
717-
src={airbnb_logo}
705+
src={logos.airbnb}
718706
className='w-44 transition-transform duration-300 hover:scale-105'
719707
width={176}
720708
height={100}
@@ -731,7 +719,7 @@ const Home = (props: any) => {
731719
{isClient && (
732720
<>
733721
<Image
734-
src={postman_logo}
722+
src={logos.postman}
735723
className='w-44 transition-transform duration-300 hover:scale-105'
736724
width={176}
737725
height={100}
@@ -744,7 +732,7 @@ const Home = (props: any) => {
744732
{isClient && (
745733
<>
746734
<Image
747-
src={endjin_logo}
735+
src={logos.endjin}
748736
className='w-44 transition-transform duration-300 hover:scale-105'
749737
width={176}
750738
height={100}
@@ -757,7 +745,7 @@ const Home = (props: any) => {
757745
{isClient && (
758746
<>
759747
<Image
760-
src={llc_logo}
748+
src={logos.llc}
761749
className='w-44 transition-transform duration-300 hover:scale-105'
762750
width={176}
763751
height={100}
@@ -774,7 +762,7 @@ const Home = (props: any) => {
774762
{isClient && (
775763
<>
776764
<Image
777-
src={vpsserver_logo}
765+
src={logos.vpsserver}
778766
className='w-44 transition-transform duration-300 hover:scale-105'
779767
width={176}
780768
height={100}
@@ -791,7 +779,7 @@ const Home = (props: any) => {
791779
{isClient && (
792780
<>
793781
<Image
794-
src={itflashcards_logo}
782+
src={logos.itflashcards}
795783
className='w-44 transition-transform duration-300 hover:scale-105'
796784
width={176}
797785
height={100}
@@ -808,7 +796,7 @@ const Home = (props: any) => {
808796
{isClient && (
809797
<>
810798
<Image
811-
src={route4me_logo}
799+
src={logos.route4me}
812800
className='w-44 transition-transform duration-300 hover:scale-105'
813801
width={176}
814802
height={100}
@@ -821,7 +809,7 @@ const Home = (props: any) => {
821809
{isClient && (
822810
<>
823811
<Image
824-
src={n8n_logo}
812+
src={logos.n8n}
825813
className='w-44 transition-transform duration-300 hover:scale-105'
826814
width={176}
827815
height={100}
@@ -834,7 +822,7 @@ const Home = (props: any) => {
834822
{isClient && (
835823
<>
836824
<Image
837-
src={ccopter_logo}
825+
src={logos.ccopter}
838826
className='w-44 transition-transform duration-300 hover:scale-105'
839827
width={176}
840828
height={100}
@@ -848,7 +836,7 @@ const Home = (props: any) => {
848836
alt='octue'
849837
width={176}
850838
height={100}
851-
src={octue_logo}
839+
src={logos.octue}
852840
className='w-44 transition-transform duration-300 hover:scale-105'
853841
/>
854842
</a>
@@ -860,10 +848,9 @@ const Home = (props: any) => {
860848
<Image
861849
width={176}
862850
height={100}
863-
src={apideck_logo}
851+
src={logos.apideck}
864852
className='w-44 transition-transform duration-300 hover:scale-105'
865-
alt='The Realtime Unified API
866-
for Accounting integrations'
853+
alt='The Realtime Unified API for Accounting integrations'
867854
/>
868855
</a>
869856
<a
@@ -874,7 +861,9 @@ for Accounting integrations'
874861
<Image
875862
width={176}
876863
height={100}
877-
src={rxdb_logo}
864+
src={logos.rxdb}
865+
className='w-44 transition-transform duration-300 hover:scale-105'
866+
alt='The local Database for JavaScript Applications'
878867
className='w-44 transition-transform duration-300 hover:scale-105'
879868
alt='The local Database for JavaScript Applications'
880869
/>
@@ -887,7 +876,9 @@ for Accounting integrations'
887876
<Image
888877
width={176}
889878
height={100}
890-
src={wda_logo}
879+
src={logos.wda}
880+
className='w-44 transition-transform duration-300 hover:scale-105'
881+
alt='best website design agencies'
891882
className='w-44 transition-transform duration-300 hover:scale-105'
892883
alt='best website design agencies'
893884
/>
@@ -900,7 +891,7 @@ for Accounting integrations'
900891
<Image
901892
width={176}
902893
height={100}
903-
src={anon_logo}
894+
src={logos.anon}
904895
className='w-44 transition-transform duration-300 hover:scale-105'
905896
alt='Instagram Story Viewer'
906897
/>
@@ -909,7 +900,7 @@ for Accounting integrations'
909900
<Image
910901
width={176}
911902
height={100}
912-
src={supadata_logo}
903+
src={logos.supadata}
913904
className='w-44 transition-transform duration-300 hover:scale-105'
914905
alt='supadata logo'
915906
/>
@@ -918,7 +909,7 @@ for Accounting integrations'
918909
<Image
919910
width={176}
920911
height={100}
921-
src={dottxt_logo}
912+
src={logos.dottxt}
922913
className='w-44 transition-transform duration-300 hover:scale-105'
923914
alt='dottxt logo'
924915
/>
@@ -931,7 +922,7 @@ for Accounting integrations'
931922
<Image
932923
width={176}
933924
height={100}
934-
src={sourcemeta_logo}
925+
src={logos.sourcemeta}
935926
className='w-44 transition-transform duration-300 hover:scale-105'
936927
alt='dottxt logo'
937928
/>
@@ -981,7 +972,7 @@ for Accounting integrations'
981972
{isClient && (
982973
<>
983974
<Image
984-
src={devevents_logo}
975+
src={logos.devevents}
985976
className='w-48 md:w-56 transition-transform duration-300 hover:scale-105'
986977
width={192}
987978
height={224}
@@ -1018,7 +1009,7 @@ for Accounting integrations'
10181009
{isClient && (
10191010
<>
10201011
<Image
1021-
src={common_room_logo}
1012+
src={logos.common_room}
10221013
className='w-48 md:w-56'
10231014
width={192}
10241015
height={224}
@@ -1031,7 +1022,7 @@ for Accounting integrations'
10311022
{isClient && (
10321023
<>
10331024
<Image
1034-
src={slack_logo}
1025+
src={logos.slack}
10351026
className=' w-24 md:w-32'
10361027
width={96}
10371028
height={128}

0 commit comments

Comments
 (0)