2021-10-06 23:04:38 -05:00
|
|
|
import Image from "next/image";
|
2021-05-01 01:15:09 -05:00
|
|
|
import Link from "next/link";
|
|
|
|
|
|
|
|
export default function TestimonialCard({ question, answer, src, alt }) {
|
|
|
|
const finalsrc = Boolean(src) ? src : "/images/logo.png";
|
|
|
|
|
|
|
|
return (
|
2021-10-11 22:43:39 -05:00
|
|
|
<div className="space-y-2">
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="ring-2 ring-alice-werefox-blue-dark dark:ring-alice-werefox-blue">
|
|
|
|
<p className="p-8 text-center text-lg sm:text-xl text-alice-werefox-blue-dark dark:text-alice-werefox-blue-light">
|
2021-10-06 23:04:38 -05:00
|
|
|
{question}
|
|
|
|
</p>
|
|
|
|
</div>
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className=" ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition">
|
2022-06-24 22:59:05 -05:00
|
|
|
<Link href="https://yiff.life/@werefox">
|
2021-10-11 22:43:39 -05:00
|
|
|
<a target="_blank">
|
|
|
|
<div className="p-2 flex">
|
|
|
|
<div className="order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4">
|
2021-10-06 23:04:38 -05:00
|
|
|
<Image
|
2021-05-01 01:15:09 -05:00
|
|
|
src={finalsrc}
|
2021-10-06 23:04:38 -05:00
|
|
|
layout="fill"
|
|
|
|
objectFit="contain"
|
2021-05-01 01:15:09 -05:00
|
|
|
alt={alt}
|
|
|
|
/>
|
2021-10-11 22:43:39 -05:00
|
|
|
</div>
|
|
|
|
<div className="order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full">
|
|
|
|
{answer}
|
|
|
|
<br />
|
2022-06-24 22:59:05 -05:00
|
|
|
{"- @alice"}
|
2021-10-11 22:43:39 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</Link>
|
2021-05-01 01:15:09 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|