2021-04-18 23:14:21 -05:00
|
|
|
import Link from "next/link";
|
|
|
|
|
|
|
|
export default function TestimonialCard({ src, alt, url, innerText, user }) {
|
2021-04-25 19:19:16 -05:00
|
|
|
const finalsrc = Boolean(src) ? src : "/images/logo.png";
|
2021-04-28 00:17:56 -05:00
|
|
|
const isMe =
|
|
|
|
user == "Shadow8t4"
|
|
|
|
? "text-werefox-blue-dark dark:text-werefox-blue"
|
|
|
|
: "text-werefox-pink-dark dark:text-werefox-pink";
|
|
|
|
const isMeLink =
|
|
|
|
user == "Shadow8t4"
|
|
|
|
? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
|
|
|
|
: "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
|
2021-04-18 23:14:21 -05:00
|
|
|
|
|
|
|
return (
|
2021-04-28 00:17:56 -05:00
|
|
|
<div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
2021-04-18 23:14:21 -05:00
|
|
|
<Link href={url}>
|
|
|
|
<a>
|
2021-04-28 00:17:56 -05:00
|
|
|
<div className="flex-1 pt-4 pb-4 pl-4">
|
2021-04-18 23:14:21 -05:00
|
|
|
{" "}
|
|
|
|
<img
|
|
|
|
className="rounded-lg sm:w-32 w-16"
|
|
|
|
src={finalsrc}
|
|
|
|
alt={alt}
|
|
|
|
/>{" "}
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</Link>{" "}
|
2021-04-28 00:17:56 -05:00
|
|
|
<div
|
|
|
|
className={`flex items-center justify-center animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center min-h-full ${isMe}`}
|
|
|
|
>
|
2021-04-18 23:14:21 -05:00
|
|
|
<p>
|
|
|
|
{innerText}
|
|
|
|
<br />
|
|
|
|
{"- "}
|
2021-04-28 00:17:56 -05:00
|
|
|
<a
|
|
|
|
target="_blank"
|
|
|
|
className={`transition ${isMeLink}`}
|
|
|
|
>{`@${user}`}</a>
|
2021-04-18 23:14:21 -05:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|