diff --git a/components/generic/renderers/user.module.css b/components/generic/renderers/user.module.css new file mode 100644 index 0000000..ed42400 --- /dev/null +++ b/components/generic/renderers/user.module.css @@ -0,0 +1,16 @@ +.festaUserRenderer { + display: inline-flex; + flex-direction: row; + + gap: 4px; + justify-content: center; + align-items: center; +} + +.festaUserRendererAvatar { + width: 1.35em; + height: 1.35em; + border-radius: 100%; + + +} \ No newline at end of file diff --git a/components/generic/renderers/user.tsx b/components/generic/renderers/user.tsx new file mode 100644 index 0000000..6eb9f95 --- /dev/null +++ b/components/generic/renderers/user.tsx @@ -0,0 +1,51 @@ +import { User } from "@prisma/client" +import { default as useSWR } from "swr" +import { FestaIcon } from "./fontawesome" +import style from "./user.module.css" +import mood from "../../../styles/mood.module.css" +import cursor from "../../../styles/cursor.module.css" +import classNames from "classnames" +import { faAsterisk, faExclamationCircle } from "@fortawesome/free-solid-svg-icons" +import { AxiosError } from "axios" + + +export type FestaUserRendererProps = { + userId: User["id"], + fallbackData?: User +} + + +export const FestaUserRenderer = ({ userId, fallbackData }: FestaUserRendererProps) => { + const { data, error } = useSWR(`/api/users/${userId}`, { fallbackData, revalidateOnFocus: false, revalidateOnReconnect: false, revalidateOnMount: fallbackData === undefined }) + + if (error) { + return ( + + + {userId} + + ) + } + if (!data) { + return ( + + + {userId} + + ) + } + + const avatarURL = data!.displayAvatarURL + const avatar = avatarURL ? + : +
+ + const name = {data?.displayName} + + return ( + + {avatar} + {name} + + ) +} \ No newline at end of file diff --git a/pages/debug/userlinks.tsx b/pages/debug/userlinks.tsx new file mode 100644 index 0000000..db2fb47 --- /dev/null +++ b/pages/debug/userlinks.tsx @@ -0,0 +1,49 @@ +import { NextPage, NextPageContext } from "next"; +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { FestaUserRenderer } from "../../components/generic/renderers/user"; +import { ViewNotice } from "../../components/generic/views/notice"; +import { Postcard } from "../../components/postcard/changer"; +import debugPostcard from "../../public/postcards/markus-spiske-iar-afB0QQw-unsplash.jpg" + + +export async function getStaticProps(context: NextPageContext) { + return { + props: { + ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"])) + } + } +} + + +const PageDebugUserLinks: NextPage = (props) => { + const { t } = useTranslation() + + return <> + + + + + + } + /> + +} + + +export default PageDebugUserLinks diff --git a/styles/cursor.module.css b/styles/cursor.module.css index e51f5f2..b4ad042 100644 --- a/styles/cursor.module.css +++ b/styles/cursor.module.css @@ -4,4 +4,8 @@ .loadingAsync { cursor: progress; +} + +.hoverable { + cursor: help; } \ No newline at end of file