diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-15 22:45:57 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-15 22:51:30 +0100 |
| commit | aa1ca65e7c9807c6d6020e39166536297fe1cdae (patch) | |
| tree | 2648da350fec3b71ab7f575d63e4c63ba08248b1 /src/components/Widget/RecentPosts/RecentPosts.tsx | |
| parent | 16dbb4742264edac82fa6bb8e461259d097f4437 (diff) | |
chore: update sidebar and widgets styles
I'm now using a widget that can be expanded/collapsed. It also allows
me to handle more effectively widgets overflow and to avoid styles
repetitions.
However, with stylelint rule "no-descending-specificity", I'm not sure
if the stylesheets are really logical... Maybe I should deactivate this
rule.
Diffstat (limited to 'src/components/Widget/RecentPosts/RecentPosts.tsx')
| -rw-r--r-- | src/components/Widget/RecentPosts/RecentPosts.tsx | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/src/components/Widget/RecentPosts/RecentPosts.tsx b/src/components/Widget/RecentPosts/RecentPosts.tsx deleted file mode 100644 index 1569284..0000000 --- a/src/components/Widget/RecentPosts/RecentPosts.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { t } from '@lingui/macro'; -import { getPublishedPosts } from '@services/graphql/queries'; -import { ArticlePreview } from '@ts/types/articles'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import useSWR from 'swr'; -import styles from './RecentPosts.module.scss'; - -const RecentPosts = () => { - const { data, error } = useSWR('/recent-posts', () => - getPublishedPosts({ first: 3 }) - ); - const { locale } = useRouter(); - const dateOptions: Intl.DateTimeFormatOptions = { - day: 'numeric', - month: 'long', - year: 'numeric', - }; - - const getPost = (post: ArticlePreview) => { - return ( - <li key={post.id} className={styles.item}> - <Link href={`/article/${post.slug}`}> - <a className={styles.link}> - <article className={styles.article}> - {post.featuredImage && - Object.keys(post.featuredImage).length > 0 && ( - <div className={styles.cover}> - <Image - src={post.featuredImage.sourceUrl} - alt={post.featuredImage.altText} - layout="fill" - objectFit="contain" - /> - </div> - )} - <h3 className={styles.title}>{post.title}</h3> - <dl className={styles.meta}> - <dt>{t`Published on:`}</dt> - <dd> - {new Date(post.dates.publication).toLocaleDateString( - locale, - dateOptions - )} - </dd> - </dl> - </article> - </a> - </Link> - </li> - ); - }; - - if (error) return <div>{t`Failed to load.`}</div>; - if (!data) return <div>{t`Loading...`}</div>; - - return ( - <ul className={styles.list}>{data.posts.map((post) => getPost(post))}</ul> - ); -}; - -export default RecentPosts; |
