feat-add share job button (#511)

src/components/ShareJobDialog.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Twitter, Linkedin, Share2 } from 'lucide-react';
+import { JobType } from '@/types/jobs.types';
+
+interface ShareOption {
+  name: string;
+  icon: React.ReactNode;
+  shareFunction: (job: JobType) => void;
+}
+
+const shareOptions: ShareOption[] = [
+  {
+    name: 'Twitter',
+    icon: <Twitter className="h-5 w-5" />,
+    shareFunction: (job: JobType) => {
+      const text = encodeURIComponent(
+        `Check out this job posting: ${job.title} at ${job.companyName}`
+      );
+      const url = encodeURIComponent(window.location.href);
+      window.open(
+        `https://twitter.com/intent/tweet?text=${text}&url=${url}`,
+        '_blank'
+      );
+    },
+  },
+  {
+    name: 'LinkedIn',
+    icon: <Linkedin className="h-5 w-5" />,
+    shareFunction: (job: JobType) => {
+      const url = encodeURIComponent(window.location.href);
+      const title = encodeURIComponent(job.title);
+      const summary = encodeURIComponent(
+        `Exciting opportunity: ${job.title} at ${job.companyName}. Check out the details!`
+      );
+      window.open(
+        `https://www.linkedin.com/sharing/share-offsite/?url=${url}&title=${title}&summary=${summary}`,
+        '_blank'
+      );
+    },
+  },
+  {
+    name: 'WhatsApp',
+    icon: <Share2 className="h-5 w-5" />, // Using Share2 as a placeholder, replace with WhatsApp icon if available
+    shareFunction: (job: JobType) => {
+      const text = encodeURIComponent(
+        `Check out this job posting: ${job.title} at ${job.companyName} - ${window.location.href}`
+      );
+      window.open(`https://wa.me/?text=${text}`, '_blank');
+    },
+  },
+];
+
+export const ShareJobDialog = ({ job }: { job: JobType }) => {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="px-4 py-2 h-fit gap-2 flex items-center"
+        >
+          Share Job <Share2 size={16} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share Job</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col space-y-4">
+          {shareOptions.map((option) => (
+            <Button
+              key={option.name}
+              variant="outline"
+              className="w-full justify-start gap-2"
+              onClick={() => option.shareFunction(job)}
+            >
+              {option.icon}
+              Share on {option.name}
+            </Button>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

src/components/job.tsx

@@ -6,22 +6,13 @@ import { Button } from './ui/button';
 import Image from 'next/image';
 import { Briefcase, MapPin } from 'lucide-react';
 import Link from 'next/link';
-import { Twitter } from 'lucide-react';
 import Linkify from 'linkify-react';
+import { ShareJobDialog } from './ShareJobDialog';
 const options = {
   defaultProtocol: 'https',
   target: '_blank',
 };
 export const Job = ({ job }: { job: JobType }) => {
-  const shareOnTwitter = () => {
-    const tweetText = encodeURIComponent(
-      'Check out this job posting @100xDevs: ' + job.title
-    );
-    const tweetUrl = encodeURIComponent(window.location.href);
-    const twitterUrl = `https://twitter.com/intent/tweet?text=${tweetText}&url=${tweetUrl}`;
-    window.open(twitterUrl, '_blank');
-  };
-
   return (
     <aside className="col-span-1 flex flex-col gap-6 lg:col-span-4 ">
       <section className="grid gap-5 border-2 shadow-sm p-6 w-full bg-gradient-to-b from-[#F1F5F9] to-white dark:from-darkBgSecondary dark:to-darkBgTertiary rounded-lg">
@@ -97,14 +88,7 @@ export const Job = ({ job }: { job: JobType }) => {
               Apply Now
             </Button>
           </Link>
-          <Button
-            variant="outline"
-            size="sm"
-            className="justify-self-start px-6 dark:text-white py-2 w-fit h-fit gap-2 flex "
-            onClick={shareOnTwitter}
-          >
-            Share on <Twitter size={16} />
-          </Button>
+          <ShareJobDialog job={job} />
         </div>
       </section>