Typography

'use client'

export default function UnorderedListExample() {
	return (
		<ul className="list-inside list-disc space-y-2">
			<li>
				Id maxime optio soluta placeat ea eaque similique consectetur dicta
				tempore.
			</li>
			<li>
				Repellat veritatis et harum ad sint reprehenderit tenetur, possimus
				tempora.
			</li>
			<li>
				Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
			</li>
		</ul>
	)
}

'use client'

export default function OrderedListExample() {
	return (
		<ul className="list-inside list-decimal space-y-2">
			<li>
				Id maxime optio soluta placeat ea eaque similique consectetur dicta
				tempore.
			</li>
			<li>
				Repellat veritatis et harum ad sint reprehenderit tenetur, possimus
				tempora.
			</li>
			<li>
				Lorem ipsum dolor sit amet consectetur adipisicing elit harum ad sint.
			</li>
		</ul>
	)
}

'use client'

export default function MarkExample() {
	return (
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt,{' '}
			<mark className="mark">aliquid</mark>. Molestias, odio illum voluptatibus{' '}
			<mark className="mark">natus dignissimos</mark>, quidem est unde
			aspernatur veniam pariatur fuga.
		</p>
	)
}

'use client'

export default function InsertDeleteExample() {
	return (
		<div className="w-full">
			<del className="del">
				<s>Always</s> Gonna Give You Up
			</del>
			<ins
				className="ins"
				cite="https://youtu.be/dQw4w9WgXcQ"
				dateTime="10-31-2022"
			>
				{' '}
				Never Gonna Give You Up{' '}
			</ins>
		</div>
	)
}

'use client'

export default function BlockquoteExample() {
	return (
		<blockquote className="typography-blockquote">
			&quot;With this Golden Apple, I wish for the curse to be lifted and for
			prosperity to return to our kingdom,&quot; Sir Cedric said as he returned
			to the king.
		</blockquote>
	)
}

/* eslint-disable react/no-unescaped-entities */
'use client'

export default function TypographyExample() {
	return (
		<div className="typography">
			<h2>Chapter 1: The Beginning</h2>
			<p>
				Long ago, in a land far away, there was a magical kingdom ruled by a
				kind and just king. The kingdom was <a href="#">full of riches</a>, and
				the people were happy and content. But one day, a dark sorcerer cast a
				curse upon the land, causing the crops to wither and the rivers to dry
				up.
			</p>
			<h2>Chapter 2: The Quest</h2>
			<p>
				The king, in his wisdom, knew that the only way to break the curse was
				to find the legendary Golden Apple. The Golden Apple was said to be
				guarded by a fierce dragon in a far-off land, and whoever could retrieve
				it would be granted one wish.
			</p>
			<h3>Chapter 3: The Journey</h3>
			<p>
				The king called forth his <mark>bravest</mark> knight, Sir Cedric, to
				undertake the quest for the Golden Apple. Sir Cedric set out on his
				journey, facing many <strong>dangers and obstacles</strong> along the
				way.
			</p>
			<h5>Chapter 4: The Battle</h5>
			<p>
				Sir Cedric finally <span className="underline">reached</span> the
				dragon's lair, where he was met with a fierce battle. But Sir Cedric was
				brave and skilled, and he was able to defeat the dragon and retrieve the
				Golden Apple.
			</p>
			<blockquote>
				"With this Golden Apple, I wish for the curse to be lifted and for
				prosperity to return to our kingdom," Sir Cedric said as he returned to
				the king.
			</blockquote>
			<p>
				The king was overjoyed and bestowed many honors upon Sir Cedric,
				including:
			</p>
			<ul>
				<li>Knight of the Realm</li>
				<li>Duke of the Kingdom</li>
				<li>Protector of the Golden Apple</li>
			</ul>
			<p>
				The curse was lifted, and the kingdom returned to its former glory. Sir
				Cedric was hailed as a hero and his legend lived on for generations to
				come.
			</p>
			<h2>The End</h2>
		</div>
	)
}