005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
import Box from '@mui/joy/Box';
|
|
import Link from '@mui/joy/Link';
|
|
import Typography from '@mui/joy/Typography';
|
|
import Launch from '@mui/icons-material/Launch';
|
|
import LinkIcon from '@mui/icons-material/Link';
|
|
|
|
export default function LinkAndTypography() {
|
|
return (
|
|
<Box sx={{ maxWidth: 360 }}>
|
|
<Typography
|
|
id="heading-demo"
|
|
level="h2"
|
|
endDecorator={
|
|
<Link
|
|
variant="outlined"
|
|
aria-labelledby="heading-demo"
|
|
href="#heading-demo"
|
|
sx={{ fontSize: 'md', borderRadius: 'sm' }}
|
|
>
|
|
<LinkIcon />
|
|
</Link>
|
|
}
|
|
sx={{ fontSize: 'lg', mb: 1, scrollMarginTop: 100 }}
|
|
>
|
|
Heading
|
|
</Typography>
|
|
<Typography>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore{' '}
|
|
<Link href="#heading-demo" startDecorator={<Launch />}>
|
|
Magna Aliqua
|
|
</Link>
|
|
. Maecenas sed enim ut sem viverra aliquet eget.
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|