Skip to content

Commit

Permalink
added copy to clipboard to all cards #21
Browse files Browse the repository at this point in the history
  • Loading branch information
ProCode2 committed Apr 24, 2021
1 parent 330b12f commit ca31077
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 61 deletions.
32 changes: 27 additions & 5 deletions components/AmbulanceCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@ import {
faPhoneAlt,
faLink,
faCheckCircle,
faExclamationTriangle
faExclamationTriangle,
faCopy
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isVerified, parseDateString } from '../lib/utils';
import { copyToClipboard } from '../lib/utils';
import React from 'react';

const AmbulanceCard = ({
Expand All @@ -22,6 +24,23 @@ const AmbulanceCard = ({
<>
<div className="w-full">
<div className="bg-white rounded-lg shadow dark:bg-gray-1200 dark:text-gray-300">
<div className="w-full">
<p
className="w-8 ml-auto text-3xl"
onClick={() => {
copyToClipboard(`
Name: ${name ? name : 'Ambulance'}
Contact: ${phone1}
`);
alert('Copied!');
}}>
<FontAwesomeIcon
className="text-gray-600 mr-4 pt-2"
title="Share on Facebook"
icon={faCopy}
/>
</p>
</div>
<div className="p-4 flex justify-between flex-wrap">
<div>
<div className="font-bold text-2xl">
Expand Down Expand Up @@ -89,17 +108,20 @@ const AmbulanceCard = ({
<hr className="dark:border-gray-900" />
<div className="flex justify-between items-center mx-4 mt-2 pb-3">
<div className="text-gray-700 text-sm dark:text-white">
{
lastVerifiedOn &&
{lastVerifiedOn && (
<div className="text-gray-700 text-xs dark:text-white">
<div>
<span>{isVerified(verificationStatus) ? "Verified on: " : "Checked on: "}</span>
<span>
{isVerified(verificationStatus)
? 'Verified on: '
: 'Checked on: '}
</span>
<span className="font-bold">
{`${parseDateString(lastVerifiedOn)}`}
</span>
</div>
</div>
}
)}
</div>
</div>
</div>
Expand Down
36 changes: 27 additions & 9 deletions components/HelplineCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import {
faPhoneAlt,
faCheckCircle,
faExclamationTriangle,
faMapMarkerAlt
faMapMarkerAlt,
faCopy
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isVerified, parseDateString } from '../lib/utils';
import { isVerified, parseDateString, copyToClipboard } from '../lib/utils';

const HelplineCard = ({
category,
Expand All @@ -26,6 +27,23 @@ const HelplineCard = ({
}) => {
return (
<div className="w-full bg-white rounded-lg shadow dark:bg-gray-1200 dark:text-gray-300">
<div className="w-full">
<p
className="w-8 ml-auto text-3xl"
onClick={() => {
copyToClipboard(`
Name: ${name ? name : ''}
Contact: ${phone1}
`);
alert('Copied!');
}}>
<FontAwesomeIcon
className="text-gray-600 mr-4 pt-2"
title="Share on Facebook"
icon={faCopy}
/>
</p>
</div>
<div className="p-4 flex justify-between flex-col md:flex-row">
<div>
<div className="font-bold text-2xl">
Expand All @@ -48,7 +66,6 @@ const HelplineCard = ({
)}
</span>
</h1>

</div>
<div className="text-sm uppercase mt-3 text-gray-700 font-semibold dark:text-white">
<FontAwesomeIcon icon={faMapMarkerAlt} className="w-3 mr-2" />
Expand Down Expand Up @@ -92,17 +109,18 @@ const HelplineCard = ({
<div className="flex justify-between items-center mx-2 mt-2 pb-3">
<div className="font-semibold">{description}</div>
<div className="text-gray-700 text-sm dark:text-white">
{
lastVerifiedOn &&
{lastVerifiedOn && (
<div className="text-gray-700 text-xs dark:text-white">
<div>
<span>{isVerified(verificationStatus) ? "Verified on: " : "Checked on: "}</span>
<span className="font-bold">
{parseDateString(lastVerifiedOn)}
<span>
{isVerified(verificationStatus)
? 'Verified on: '
: 'Checked on: '}
</span>
<span className="font-bold">{parseDateString(lastVerifiedOn)}</span>
</div>
</div>
}
)}
</div>
</div>
</div>
Expand Down
35 changes: 27 additions & 8 deletions components/HospitalCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import {
faPhoneAlt,
faCheckCircle,
faExclamationTriangle,
faMapMarkerAlt
faMapMarkerAlt,
faCopy
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isVerified, parseDateString } from '../lib/utils';
import { isVerified, parseDateString, copyToClipboard } from '../lib/utils';

const HospitalCard = ({
name,
Expand All @@ -21,6 +22,23 @@ const HospitalCard = ({
}) => {
return (
<div className="w-full bg-white rounded-lg shadow dark:bg-gray-1200 dark:text-gray-300">
<div className="w-full">
<p
className="w-8 ml-auto text-3xl"
onClick={() => {
copyToClipboard(`
Name: ${name ? name : 'Ambulance'}
Contact: ${phone1}
`);
alert('Copied!');
}}>
<FontAwesomeIcon
className="text-gray-600 mr-4 pt-2"
title="Share on Facebook"
icon={faCopy}
/>
</p>
</div>
<div className="p-4 flex justify-between flex-wrap">
<div>
<div className="font-bold text-2xl dark:text-white">
Expand Down Expand Up @@ -66,17 +84,18 @@ const HospitalCard = ({
<div className="flex justify-between items-center px-2 mx-3 mt-2 pb-3 flex-wrap">
<div className="font-semibold dark:text-gray-400">{pointOfContact}</div>
<div className="text-gray-700 dark:text-gray-400 text-sm">
{
lastVerifiedOn &&
{lastVerifiedOn && (
<div className="text-gray-700 text-xs dark:text-white">
<div>
<span>{isVerified(verificationStatus) ? "Verified on: " : "Checked on: "}</span>
<span className="font-bold">
{parseDateString(lastVerifiedOn)}
<span>
{isVerified(verificationStatus)
? 'Verified on: '
: 'Checked on: '}
</span>
<span className="font-bold">{parseDateString(lastVerifiedOn)}</span>
</div>
</div>
}
)}
</div>
</div>
</div>
Expand Down
51 changes: 37 additions & 14 deletions components/MedicinesCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import {
faPhoneAlt,
faCheckCircle,
faExclamationTriangle,
faEnvelope
faEnvelope,
faCopy
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isVerified, parseDateString } from '../lib/utils';
import { isVerified, parseDateString, copyToClipboard } from '../lib/utils';

const MedicinesCard = ({
verificationStatus,
Expand All @@ -23,6 +24,23 @@ const MedicinesCard = ({
}) => {
return (
<div className="w-full bg-white rounded-lg shadow dark:bg-gray-1200 dark:text-gray-300">
<div className="w-full">
<p
className="w-8 ml-auto text-3xl"
onClick={() => {
copyToClipboard(`
Name: ${name ? name : ''}
Contact: ${phone1}
`);
alert('Copied!');
}}>
<FontAwesomeIcon
className="text-gray-600 mr-4 pt-2"
title="Share on Facebook"
icon={faCopy}
/>
</p>
</div>
<div className="p-4 flex justify-between flex-wrap">
<div>
<div className="font-bold text-2xl">
Expand All @@ -44,13 +62,17 @@ const MedicinesCard = ({
)}
</span>
</h1>
{city && <div className="text-sm text-gray-700 dark:text-gray-200 font-semibold">
<span> {city} </span>
</div>}
{city && (
<div className="text-sm text-gray-700 dark:text-gray-200 font-semibold">
<span> {city} </span>
</div>
)}
</div>
{address && <div className="w-11/12 max-w-3xl mt-2">
<div className="text-sm">{address}</div>
</div>}
{address && (
<div className="w-11/12 max-w-3xl mt-2">
<div className="text-sm">{address}</div>
</div>
)}
</div>
<div className="flex flex-col sm:items-end items-start">
{phone1 && (
Expand Down Expand Up @@ -94,17 +116,18 @@ const MedicinesCard = ({
<div className="flex justify-between items-center mx-4 mt-2 pb-3 flex-wrap">
<div className="font-semibold dark:text-gray-400">{description}</div>
<div className="text-gray-700 dark:text-gray-400 text-sm">
{
lastVerifiedOn &&
{lastVerifiedOn && (
<div className="text-gray-700 text-xs dark:text-white">
<div>
<span>{isVerified(verificationStatus) ? "Verified on: " : "Checked on: "}</span>
<span className="font-bold">
{parseDateString(lastVerifiedOn)}
<span>
{isVerified(verificationStatus)
? 'Verified on: '
: 'Checked on: '}
</span>
<span className="font-bold">{parseDateString(lastVerifiedOn)}</span>
</div>
</div>
}
)}
</div>
</div>
</div>
Expand Down
35 changes: 27 additions & 8 deletions components/OxygenCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@ import {
faLink,
faPhoneAlt,
faCheckCircle,
faExclamationTriangle
faExclamationTriangle,
faCopy
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { isVerified, parseDateString } from '../lib/utils';
import { isVerified, parseDateString, copyToClipboard } from '../lib/utils';

const OxygenCard = ({
name,
Expand All @@ -25,6 +26,23 @@ const OxygenCard = ({
}) => {
return (
<div className="w-full bg-white rounded-lg shadow dark:bg-gray-1200 dark:text-gray-300">
<div className="w-full">
<p
className="w-8 ml-auto text-3xl"
onClick={() => {
copyToClipboard(`
Name: ${name ? name : 'Ambulance'}
Contact: ${phone1}
`);
alert('Copied!');
}}>
<FontAwesomeIcon
className="text-gray-600 mr-4 pt-2"
title="Share on Facebook"
icon={faCopy}
/>
</p>
</div>
<div className="p-4 flex justify-between flex-wrap">
<div>
<div className="font-bold text-2xl dark:text-white">
Expand Down Expand Up @@ -87,17 +105,18 @@ const OxygenCard = ({
<div className="flex justify-between items-center mx-4 mt-2 pb-3 flex-wrap">
<div className="font-semibold dark:text-gray-400">{description}</div>
<div className="text-gray-700 text-sm dark:text-gray-400">
{
lastVerifiedOn &&
{lastVerifiedOn && (
<div className="text-gray-700 text-xs dark:text-white">
<div>
<span>{isVerified(verificationStatus) ? "Verified on: " : "Checked on: "}</span>
<span className="font-bold">
{parseDateString(lastVerifiedOn)}
<span>
{isVerified(verificationStatus)
? 'Verified on: '
: 'Checked on: '}
</span>
<span className="font-bold">{parseDateString(lastVerifiedOn)}</span>
</div>
</div>
}
)}
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit ca31077

Please sign in to comment.