diff --git a/apps/frontend/src/components/CopyButton.tsx b/apps/frontend/src/components/CopyButton.tsx
new file mode 100644
index 0000000..1619ac2
--- /dev/null
+++ b/apps/frontend/src/components/CopyButton.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@components/ui/button';
+import React from 'react';
+
+interface CopyButtonProps {
+ text: string;
+ copyAction: () => void;
+}
+
+const CopyButton = ({ text, copyAction }: CopyButtonProps) => {
+ return (
+
+ );
+};
+
+export default CopyButton;
diff --git a/apps/frontend/src/components/testimonials/AutoRotatingTestimonialCarousel.tsx b/apps/frontend/src/components/testimonials/AutoRotatingTestimonialCarousel.tsx
index 8e97141..ba845d4 100644
--- a/apps/frontend/src/components/testimonials/AutoRotatingTestimonialCarousel.tsx
+++ b/apps/frontend/src/components/testimonials/AutoRotatingTestimonialCarousel.tsx
@@ -1,3 +1,4 @@
+import ShareOptions from '@containers/donations/ShareOptions';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
export interface CarouselSlide {
@@ -196,6 +197,7 @@ export const AutoRotatingTestimonialCarousel: React.FC = ({
/>
+
);
};
diff --git a/apps/frontend/src/containers/donations/ShareOptions.tsx b/apps/frontend/src/containers/donations/ShareOptions.tsx
new file mode 100644
index 0000000..45457ff
--- /dev/null
+++ b/apps/frontend/src/containers/donations/ShareOptions.tsx
@@ -0,0 +1,91 @@
+import { Button } from '@components/ui/button';
+import React, { useState } from 'react';
+import {
+ FacebookShareButton,
+ FacebookIcon,
+ XIcon,
+ TwitterShareButton,
+ LinkedinShareButton,
+ LinkedinIcon,
+} from 'react-share';
+import CopyButton from '../../components/CopyButton';
+
+const ShareOptions = ({ activeSlideUrl }: { activeSlideUrl: string }) => {
+ const [isCopyingText, setIsCopyingText] = useState(false);
+ const [isCopyingImage, setIsCopyingImage] = useState(false);
+ const message = `Want to support your community? Join me in donating to the Fenway Community Center!\n\n${window.location.href}`;
+
+ const handleCopyTextClick = async () => {
+ try {
+ setIsCopyingText(true);
+ await navigator.clipboard.writeText(message);
+ setTimeout(() => setIsCopyingText(false), 1000);
+ } catch (err) {
+ console.error('Failed to copy message to clipboard');
+ alert('Failed to copy message to clipboard');
+ }
+ };
+
+ const handleCopyImageClick = async () => {
+ try {
+ const response = await fetch(activeSlideUrl);
+ if (!response.ok) {
+ throw new Error('Failed to fetch image');
+ }
+
+ const blob = await response.blob();
+ const imageType = blob.type || 'image/png';
+ const imageItem = new ClipboardItem({ [imageType]: blob });
+ await navigator.clipboard.write([imageItem]);
+
+ setIsCopyingImage(true);
+ setTimeout(() => setIsCopyingImage(false), 1000);
+ } catch (err) {
+ console.error('Failed to copy image to clipboard', err);
+ alert('Failed to copy image to clipboard');
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+