feat: added share on x button

src/components/job.tsx

@@ -1,15 +1,26 @@
+'use client';
 import { JobType } from '@/types/jobs.types';
 import Icon from './ui/icon';
 import { formatSalary } from '@/lib/utils';
 import { Button } from './ui/button';
 import Image from 'next/image';
-import { MapPin, Share2 } from 'lucide-react';
+import { MapPin } from 'lucide-react';
+import { Twitter } from 'lucide-react';
 import Linkify from 'linkify-react';
 const options = {
   defaultProtocol: 'https',
   target: '_blank',
 };
 export const Job = ({ job }: { job: JobType }) => {
+  const shareOnTwitter = () => {
+    const tweetText = encodeURIComponent(
+      'I just read an amazing blog post! Check it out:'
+    );
+    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">
@@ -51,7 +62,7 @@ export const Job = ({ job }: { job: JobType }) => {
               <p className="text-xs md:text-sm font-semibold">{job.address}</p>
             </div>
           </div>
-          <div className="max-w-[60%] flex-wrap flex justify-start items-center gap-2">
+          <div className="w-full md:max-w-[60%] flex-wrap flex justify-start items-center gap-2">
             {job.skills.map((skill, index) => {
               return (
                 <span
@@ -70,10 +81,12 @@ export const Job = ({ job }: { job: JobType }) => {
             Apply Now
           </Button>
           <Button
-            className="justify-self-start flex gap-2 items-center"
-            variant={'link'}
+            variant="outline"
+            size="sm"
+            className="flex items-center gap-2 py-4 px-6"
+            onClick={shareOnTwitter}
           >
-            <Share2 size={16} /> Share Job
+            Share on <Twitter size={16} />
           </Button>
         </div>
       </section>