added quote widget as an information widget
gets daily quote from https://api.quotable.io/random options for text_size: and width: - quote: text_size: md width: 400px
This commit is contained in:
parent
7555b21211
commit
40bd4d5dfe
43
src/components/widgets/quote/quote.jsx
Normal file
43
src/components/widgets/quote/quote.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
|
||||
const textSizes = {
|
||||
"4xl": "text-4xl",
|
||||
"3xl": "text-3xl",
|
||||
"2xl": "text-2xl",
|
||||
xl: "text-xl",
|
||||
lg: "text-lg",
|
||||
md: "text-md",
|
||||
sm: "text-sm",
|
||||
xs: "text-xs",
|
||||
};
|
||||
|
||||
export default function DailyQuote({ options }) {
|
||||
const { text_size: textSize, width } = options;
|
||||
const [quote, setQuote] = useState(null);
|
||||
|
||||
useSWR("https://api.quotable.io/random", {
|
||||
onSuccess: (data) => {
|
||||
setQuote(data);
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error(error);
|
||||
},
|
||||
});
|
||||
|
||||
if (!quote) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const textClass = `quote-content ${textSizes[textSize || "lg"]} text-theme-800 dark:text-theme-200`;
|
||||
const wrapperStyle = { width };
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center ml-4" style={wrapperStyle}>
|
||||
<div className={textClass}>
|
||||
“{quote.content}”
|
||||
</div>
|
||||
<div className="quote-author">{quote.author}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user