generated from nhcarrigan/template
46 lines
1.6 KiB
TypeScript
46 lines
1.6 KiB
TypeScript
|
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { Rule } from "./rule";
|
||
|
|
|
||
|
|
interface ReviewProps {
|
||
|
|
name: string;
|
||
|
|
date: Date;
|
||
|
|
content: string;
|
||
|
|
sourceIcon: IconDefinition;
|
||
|
|
sourceUrl: string;
|
||
|
|
sourceName: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Review = (props: ReviewProps): JSX.Element => {
|
||
|
|
const { name, date, content, sourceIcon, sourceUrl, sourceName } = props;
|
||
|
|
return (
|
||
|
|
<li className="mb-10 ms-6">
|
||
|
|
<span className="absolute flex items-center justify-center w-6 h-6 bg-[--background] text-[--foreground] rounded-full -start-3">
|
||
|
|
<FontAwesomeIcon icon={sourceIcon} />
|
||
|
|
</span>
|
||
|
|
<div className="items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:bg-gray-700 dark:border-gray-600">
|
||
|
|
<time className="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">
|
||
|
|
{date.toLocaleDateString("en-GB")}
|
||
|
|
</time>
|
||
|
|
<div className="text-md font-normal text-gray-500 dark:text-gray-300">
|
||
|
|
Review from{" "}
|
||
|
|
<a
|
||
|
|
href={sourceUrl}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="font-semibold text-[#abfcec] hover:underline"
|
||
|
|
>
|
||
|
|
{name}
|
||
|
|
</a>{" "}
|
||
|
|
via{" "}
|
||
|
|
<span className="bg-gray-100 text-gray-800 text-xs font-normal me-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">
|
||
|
|
{sourceName}
|
||
|
|
</span>
|
||
|
|
<Rule />
|
||
|
|
<p className="text-sm">{content}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
};
|