Skip to content

Commit 0bf87ec

Browse files
gracesilgegracesilge
committed
Update footer to use array refs
1 parent 5db63e3 commit 0bf87ec

1 file changed

Lines changed: 80 additions & 120 deletions

File tree

‎src/components/puck/Footer.tsx‎

Lines changed: 80 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -3,114 +3,76 @@ import React from 'react';
33

44
export type FooterProps = {
55
showActionButtons?: boolean;
6-
actionButton1Text?: string;
7-
actionButton1Href?: string;
8-
actionButton2Text?: string;
9-
actionButton2Href?: string;
10-
actionButton3Text?: string;
11-
actionButton3Href?: string;
6+
actionButtons: Array<{
7+
label: string;
8+
href: string;
9+
}>;
1210
showSocialMedia?: boolean;
13-
socialMedia1Label?: string;
14-
socialMedia1LogoSrc?: string;
15-
socialMedia1LogoAlt?: string;
16-
socialMedia2Label?: string;
17-
socialMedia2LogoSrc?: string;
18-
socialMedia2LogoAlt?: string;
19-
socialMedia3Label?: string;
20-
socialMedia3LogoSrc?: string;
21-
socialMedia3LogoAlt?: string;
11+
socialMedia: Array<{
12+
label: string;
13+
logoSrc: string;
14+
logoAlt: string;
15+
}>;
2216
organizationName?: string;
2317
organizationAddress?: string;
24-
webmasterEmail?: string;
25-
webmasterLabel?: string;
26-
mediaInquiriesEmail?: string;
27-
mediaInquiriesLabel?: string;
18+
emailDisplay: Array<{
19+
label: string;
20+
email: string;
21+
}>;
2822
};
2923

3024
export const Footer: React.FC<FooterProps> = ({
3125
showActionButtons,
32-
actionButton1Text,
33-
actionButton1Href,
34-
actionButton2Text,
35-
actionButton2Href,
36-
actionButton3Text,
37-
actionButton3Href,
26+
actionButtons,
3827
showSocialMedia,
39-
socialMedia1Label,
40-
socialMedia1LogoSrc,
41-
socialMedia1LogoAlt,
42-
socialMedia2Label,
43-
socialMedia2LogoSrc,
44-
socialMedia2LogoAlt,
45-
socialMedia3Label,
46-
socialMedia3LogoSrc,
47-
socialMedia3LogoAlt,
28+
socialMedia,
4829
organizationName,
4930
organizationAddress,
50-
webmasterEmail,
51-
webmasterLabel,
52-
mediaInquiriesEmail,
53-
mediaInquiriesLabel,
31+
emailDisplay,
5432
}) => (
5533
<footer className="bg-black w-full text-center overflow-x-hidden">
5634
<div className="max-w-7xl mx-auto px-6 text-center">
5735

5836
{showActionButtons && (
5937
<div className="flex justify-center items-center pt-10 gap-5">
60-
<button className="button bg-black text-white border-2 p-5 border-white transition-all duration-350 ease-in-out hover:bg-white hover:text-black">{actionButton1Text}</button>
61-
<button className="button bg-black text-white border-2 p-5 border-white transition-all duration-350 ease-in-out hover:bg-white hover:text-black">{actionButton2Text}</button>
62-
<button className="button bg-black text-white border-2 p-5 border-white transition-all duration-350 ease-in-out hover:bg-white hover:text-black">{actionButton3Text}</button>
38+
{ actionButtons.map((group, index) => (
39+
<a href={group.href}>
40+
<button key={index} className="button bg-black text-white border-2 p-5 border-white transition-all duration-350 ease-in-out hover:bg-white hover:text-black">
41+
{group.label}
42+
</button>
43+
</a>
44+
))}
6345
</div>
6446
)}
6547

6648
{showSocialMedia && (
6749
<div className="flex flex-wrap justify-center items-center gap-8 py-6 px-4">
68-
<div className="flex flex-col items-center px-5">
69-
<p className="text-white font-light pb-3">{socialMedia1Label}</p>
70-
{socialMedia1LogoSrc ? (
71-
<img src={socialMedia1LogoSrc} alt={socialMedia1LogoAlt} className="w-16 h-auto" />
72-
) : (
73-
<div className="w-16 h-16 bg-gray-600 flex items-center justify-center text-white text-xs">Logo</div>
74-
)}
75-
</div>
76-
<div className="flex flex-col items-center px-5">
77-
<p className="text-white font-light pb-3">{socialMedia2Label}</p>
78-
{socialMedia2LogoSrc ? (
79-
<img src={socialMedia2LogoSrc} alt={socialMedia2LogoAlt} className="w-16 h-auto" />
80-
) : (
81-
<div className="w-16 h-16 bg-gray-600 flex items-center justify-center text-white text-xs">Logo</div>
82-
)}
83-
</div>
84-
<div className="flex flex-col items-center px-5">
85-
<p className="text-white font-light pb-3">{socialMedia3Label}</p>
86-
{socialMedia3LogoSrc ? (
87-
<img src={socialMedia3LogoSrc} alt={socialMedia3LogoAlt} className="w-16 h-auto" />
88-
) : (
89-
<div className="w-16 h-16 bg-gray-600 flex items-center justify-center text-white text-xs">Logo</div>
90-
)}
91-
</div>
50+
{ socialMedia.map((group, index) => (
51+
<div key={index} className="flex flex-col items-center px-5">
52+
<p className="text-white font-light pb-3">{group.label}</p>
53+
{group.logoSrc ? (
54+
<img src={group.logoSrc} alt={group.logoAlt} className="w-16 h-auto" />
55+
) : (
56+
<div className="w-16 h-16 bg-gray-600 flex items-center justify-center text-white text-xs">Logo</div>
57+
)}
58+
</div>
59+
))}
9260
</div>
9361
)}
9462

9563
<div className="pb-10">
9664
<p className="text-white font-light pb-4">{organizationName}</p>
9765
<p className="text-white font-light pb-4">{organizationAddress}</p>
98-
<p className="text-white font-light pb-4 break-words">{webmasterLabel}&nbsp;
99-
<a
100-
href={`mailto:${webmasterEmail}`}
101-
className="underline text-white font-light hover:text-gray-300 wrap-break-word"
102-
>
103-
{webmasterEmail}
104-
</a>
105-
</p>
106-
<p className="text-white font-light pb-4 break-words">{mediaInquiriesLabel}&nbsp;
107-
<a
108-
href={`mailto:${mediaInquiriesEmail}`}
109-
className="underline text-white font-light hover:text-gray-300 transition duration-300 wrap-break-word"
110-
>
111-
{mediaInquiriesEmail}
112-
</a>
113-
</p>
66+
{ emailDisplay.map((group, index) => (
67+
<p key={index} className="text-white font-light pb-4 break-words">{group.label}&nbsp;
68+
<a
69+
href={`mailto:${group.email}`}
70+
className="underline text-white font-light hover:text-gray-300 wrap-break-word"
71+
>
72+
{group.email}
73+
</a>
74+
</p>
75+
))}
11476
</div>
11577
</div>
11678
</footer>
@@ -126,59 +88,57 @@ export const FooterConfig: ComponentConfig<FooterProps> = {
12688
{ label: "Hide", value: false },
12789
]
12890
},
129-
actionButton1Text: { type: "text" },
130-
actionButton1Href: { type: "text" },
131-
actionButton2Text: { type: "text" },
132-
actionButton2Href: { type: "text" },
133-
actionButton3Text: { type: "text" },
134-
actionButton3Href: { type: "text" },
91+
actionButtons: {
92+
type: "array",
93+
arrayFields: {
94+
label: { type: "text" },
95+
href: { type: "text" },
96+
},
97+
},
13598
showSocialMedia: {
13699
type: "radio",
137100
options: [
138101
{ label: "Show", value: true },
139102
{ label: "Hide", value: false },
140103
]
141104
},
142-
socialMedia1Label: { type: "text" },
143-
socialMedia1LogoSrc: { type: "text" },
144-
socialMedia1LogoAlt: { type: "text" },
145-
socialMedia2Label: { type: "text" },
146-
socialMedia2LogoSrc: { type: "text" },
147-
socialMedia2LogoAlt: { type: "text" },
148-
socialMedia3Label: { type: "text" },
149-
socialMedia3LogoSrc: { type: "text" },
150-
socialMedia3LogoAlt: { type: "text" },
105+
socialMedia: {
106+
type: "array",
107+
arrayFields: {
108+
label: { type: "text" },
109+
logoSrc: { type: "text" },
110+
logoAlt: { type: "text" },
111+
},
112+
},
151113
organizationName: { type: "text" },
152114
organizationAddress: { type: "text" },
153-
webmasterEmail: { type: "text" },
154-
webmasterLabel: { type: "text" },
155-
mediaInquiriesEmail: { type: "text" },
156-
mediaInquiriesLabel: { type: "text" },
115+
emailDisplay: {
116+
type: "array",
117+
arrayFields: {
118+
label: { type: "text" },
119+
email: { type: "text" },
120+
},
121+
},
157122
},
158123
defaultProps: {
159124
showActionButtons: true,
160-
actionButton1Text: "GIVE FEEDBACK",
161-
actionButton1Href: "#",
162-
actionButton2Text: "MAILING LIST",
163-
actionButton2Href: "#",
164-
actionButton3Text: "GET INVOLVED",
165-
actionButton3Href: "#",
125+
actionButtons: [
126+
{ label: "GIVE FEEDBACK", href: "#" },
127+
{ label: "MAILING LIST", href: "#" },
128+
{ label: "GET INVOLVED", href: "#" },
129+
],
166130
showSocialMedia: true,
167-
socialMedia1Label: "SGA",
168-
socialMedia1LogoSrc: "",
169-
socialMedia1LogoAlt: "SGA Instagram",
170-
socialMedia2Label: "Campus Affairs",
171-
socialMedia2LogoSrc: "",
172-
socialMedia2LogoAlt: "Campus Affairs Instagram",
173-
socialMedia3Label: "SGA",
174-
socialMedia3LogoSrc: "",
175-
socialMedia3LogoAlt: "SGA TikTok",
131+
socialMedia: [
132+
{ label: "SGA", logoSrc: "", logoAlt: "SGA Instagram" },
133+
{ label: "Campus Affairs", logoSrc: "", logoAlt: "Campus Affairs Instagram" },
134+
{ label: "SGA", logoSrc: "", logoAlt: "SGA TikTok" },
135+
],
176136
organizationName: "Northeastern University Student Government Association",
177137
organizationAddress: "332 Curry Student Center, 360 Huntington Avenue, Boston, MA 02115",
178-
webmasterEmail: "sgaOperations@northeastern.edu",
179-
webmasterLabel: "Webmaster:",
180-
mediaInquiriesEmail: "sgaExternalAffairs@northeastern.edu",
181-
mediaInquiriesLabel: "Media Inquiries:",
138+
emailDisplay: [
139+
{ label: "Webmaster:", email: "sgaOperations@northeastern.edu" },
140+
{ label: "Media Inquiries:", email: "sgaExternalAffairs@northeastern.edu" },
141+
],
182142
},
183143
render: (props) => <Footer {...props} />,
184-
}
144+
};

0 commit comments

Comments
 (0)