50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import FullMottoLogo, { LogoType } from '@nirvana/components/logo/fullMotto';
|
|
|
|
type Quote = {
|
|
content: string;
|
|
author: string;
|
|
length: number;
|
|
dateAdded: Date;
|
|
_id: string;
|
|
tags: string[];
|
|
};
|
|
export default function FlowState({ handleReconnect }: { handleReconnect: () => void }) {
|
|
const [quote, setQuote] = useState<Quote>(null);
|
|
|
|
useEffect(() => {
|
|
fetch('https://api.quotable.io/random')
|
|
.then((res) => res.json())
|
|
.then((data: Quote) => {
|
|
console.warn(data);
|
|
|
|
setQuote(data);
|
|
})
|
|
.catch((error) => {
|
|
// do nothing, don't bother user, just don't show the quote
|
|
console.warn(error);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col flex-1 justify-center items-center relative">
|
|
{/* <img src="https://source.unsplash.com/random/?nature" /> */}
|
|
<FullMottoLogo type={LogoType.small} className={'absolute bottom-5 mx-auto'} />
|
|
|
|
{quote && (
|
|
<span className="flex flex-col justify-center items-center max-w-screen-sm">
|
|
<span className="text-xl text-gray-800 font-semibold text-center">{`"${quote.content}"`}</span>
|
|
<span className="tex-md italic text-gray-400">{quote.author}</span>
|
|
</span>
|
|
)}
|
|
|
|
<button
|
|
onClick={handleReconnect}
|
|
className="text-gray-300 text-xs p-3 transition-all hover:bg-gray-200 fixed top-5 right-5"
|
|
>
|
|
reconnect
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|