Small improvements to the RecorderChip and the Transcript lines
This commit is contained in:
DrMint
parent
b172aa34a2
commit
0c8f330f5a
@ -1,5 +1,6 @@
|
||||
import HorizontalLine from "components/HorizontalLine";
|
||||
import InsetBox from "components/InsetBox";
|
||||
import ToolTip from "components/ToolTip";
|
||||
import { useAppLayout } from "contexts/AppLayoutContext";
|
||||
import Markdown from "markdown-to-jsx";
|
||||
import { slugify } from "queries/helpers";
|
||||
@ -28,28 +29,60 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<h2
|
||||
id={props.id}
|
||||
className="flex flex-row place-items-center place-content-center gap-3 hover:[--anchor-opacity:100] [--anchor-opacity:0]"
|
||||
style={props.style}
|
||||
>
|
||||
{props.children}
|
||||
<abbr title="Copy anchor link">
|
||||
<span
|
||||
className="material-icons opacity-[var(--anchor-opacity)] transition-all hover:text-dark cursor-pointer"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
process.env.NEXT_PUBLIC_URL_SELF +
|
||||
window.location.pathname +
|
||||
"#" +
|
||||
props.id
|
||||
);
|
||||
}}
|
||||
>
|
||||
link
|
||||
</span>
|
||||
</abbr>
|
||||
</h2>
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h2 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h2>
|
||||
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
|
||||
<ToolTip content={"Copied! 👍"} trigger="click">
|
||||
<span
|
||||
className="material-icons transition-color hover:text-dark cursor-pointer"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
process.env.NEXT_PUBLIC_URL_SELF +
|
||||
window.location.pathname +
|
||||
"#" +
|
||||
props.id
|
||||
);
|
||||
}}
|
||||
>
|
||||
link
|
||||
</span>
|
||||
</ToolTip>
|
||||
</ToolTip>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
h3: {
|
||||
component: (props: {
|
||||
id: string;
|
||||
style: React.CSSProperties;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-row place-items-center place-content-center gap-3">
|
||||
<h3 id={props.id} style={props.style}>
|
||||
{props.children}
|
||||
</h3>
|
||||
<ToolTip content={"Copy anchor link"} trigger="mouseenter">
|
||||
<ToolTip content={"Copied! 👍"} trigger="click">
|
||||
<span
|
||||
className="material-icons transition-color hover:text-dark cursor-pointer"
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
process.env.NEXT_PUBLIC_URL_SELF +
|
||||
window.location.pathname +
|
||||
"#" +
|
||||
props.id
|
||||
);
|
||||
}}
|
||||
>
|
||||
link
|
||||
</span>
|
||||
</ToolTip>
|
||||
</ToolTip>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
@ -82,7 +115,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||
Transcript: {
|
||||
component: (props) => {
|
||||
return (
|
||||
<div className="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2">
|
||||
<div className="grid grid-cols-[auto_1fr] mobile:grid-cols-1 gap-x-6 gap-y-2">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
@ -92,7 +125,7 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
|
||||
component: (props) => {
|
||||
return (
|
||||
<>
|
||||
<strong className="text-dark opacity-60">
|
||||
<strong className="text-dark opacity-60 mobile:!-mb-4">
|
||||
{props.name}
|
||||
</strong>
|
||||
<p className="whitespace-pre-line">{props.children}</p>
|
||||
|
||||
@ -15,8 +15,8 @@ export default function TOC(props: TOCProps): JSX.Element {
|
||||
return (
|
||||
<div>
|
||||
<h3 className="text-xl">Table of content</h3>
|
||||
<ol className="text-left">
|
||||
<li className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap">
|
||||
<ol className="text-left max-w-[14.5rem]">
|
||||
<li className="my-2 overflow-x-hidden relative text-ellipsis whitespace-nowrap">
|
||||
<a className="" onClick={() => router.replace(`#${toc.slug}`)}>
|
||||
{<abbr title={toc.title}>{toc.title}</abbr>}
|
||||
</a>
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
GetContentTextQuery,
|
||||
GetWebsiteInterfaceQuery,
|
||||
} from "graphql/operations-types";
|
||||
import Button from "./Button";
|
||||
import Img, { ImageQuality } from "./Img";
|
||||
import ToolTip from "./ToolTip";
|
||||
|
||||
@ -19,41 +20,46 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element {
|
||||
return (
|
||||
<ToolTip
|
||||
content={
|
||||
<div className="p-2 py-5 grid gap-2">
|
||||
<div className="grid grid-flow-col gap-2 place-items-center place-content-start">
|
||||
<div className="text-left p-2 py-5 grid gap-8">
|
||||
<div className="grid grid-flow-col gap-6 place-items-center place-content-start">
|
||||
{recorder.attributes.avatar.data && (
|
||||
<Img
|
||||
className="w-8 rounded-full"
|
||||
className="w-20 rounded-full border-4 border-mid"
|
||||
image={recorder.attributes.avatar.data.attributes}
|
||||
quality={ImageQuality.Small}
|
||||
rawImg
|
||||
/>
|
||||
)}
|
||||
<h3 className="text-xl">{recorder.attributes.username}</h3>
|
||||
<div className="grid gap-2">
|
||||
<h3 className=" text-2xl">{recorder.attributes.username}</h3>
|
||||
{recorder.attributes.languages.data.length > 0 && (
|
||||
<div className="flex flex-row flex-wrap gap-1">
|
||||
<p>{langui.languages}:</p>
|
||||
{recorder.attributes.languages.data.map((language) => (
|
||||
<Chip key={language.attributes.code}>
|
||||
{language.attributes.code.toUpperCase()}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{recorder.attributes.pronouns && (
|
||||
<div className="flex flex-row flex-wrap gap-1">
|
||||
<p>{langui.pronouns}:</p>
|
||||
<Chip>{recorder.attributes.pronouns}</Chip>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{recorder.attributes.languages.data.length > 0 && (
|
||||
<div className="flex flex-row flex-wrap gap-1">
|
||||
<p>{langui.languages}:</p>
|
||||
{recorder.attributes.languages.data.map((language) => (
|
||||
<Chip key={language.attributes.code}>
|
||||
{language.attributes.code.toUpperCase()}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{recorder.attributes.bio.length > 0 && (
|
||||
<p>{recorder.attributes.bio[0].bio}</p>
|
||||
)}
|
||||
{recorder.attributes.pronouns && (
|
||||
<div className="flex flex-row flex-wrap gap-1">
|
||||
<p>{langui.pronouns}:</p>
|
||||
<Chip>{recorder.attributes.pronouns}</Chip>
|
||||
</div>
|
||||
)}
|
||||
<p>
|
||||
{recorder.attributes.bio.length > 0 &&
|
||||
recorder.attributes.bio[0].bio}
|
||||
</p>
|
||||
|
||||
<Button className="cursor-not-allowed">View profile</Button>
|
||||
</div>
|
||||
}
|
||||
placement="top"
|
||||
trigger="click"
|
||||
>
|
||||
<Chip key={recorder.id}>
|
||||
{recorder.attributes.anonymize
|
||||
|
||||
@ -11,8 +11,9 @@ export default function ToolTip(props: ToolTipProps): JSX.Element {
|
||||
if (newProps.interactive === undefined) newProps.interactive = true;
|
||||
if (newProps.animation === undefined) newProps.animation = "scale-subtle";
|
||||
|
||||
|
||||
return (
|
||||
<Tippy {...newProps}>
|
||||
<Tippy className={`text-[80%] ${newProps.className}`} {...newProps}>
|
||||
<div>{props.children}</div>
|
||||
</Tippy>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user