540 lines
24 KiB
TypeScript
540 lines
24 KiB
TypeScript
import { Link } from '@/i18n/routing';
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Icon } from "@/components/ui/icon";
|
|
import React from "react";
|
|
|
|
type Props = {};
|
|
|
|
const lists = [
|
|
{
|
|
id: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
},
|
|
{
|
|
id: 4,
|
|
},
|
|
{
|
|
id: 5,
|
|
},
|
|
{
|
|
id: 6,
|
|
},
|
|
];
|
|
const Typography = ({ }: Props) => {
|
|
return (
|
|
<div>
|
|
{" "}
|
|
<div>
|
|
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>HTML headings Default</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-default-600 ">
|
|
All HTML headings, are available. .h1 through .h7 classes are
|
|
also available, for when you want to match the font styling of a
|
|
heading.
|
|
</div>
|
|
<div className="bg-default-100 text-xs text-default-600 flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
|
|
<span>PREVIEW</span>
|
|
<span>FONT SIZE</span>
|
|
</div>
|
|
|
|
<div className="text-[60px] md:flex justify-between items-center mb-4">
|
|
<h1>Heading 1</h1>
|
|
<span className="text-[60px] text-default-600 ">60px</span>
|
|
</div>
|
|
|
|
<div className="text-[48px] md:flex justify-between items-center mb-4">
|
|
<h2>Heading 2</h2>
|
|
<span className="text-default-600 ">48px</span>
|
|
</div>
|
|
|
|
<div className="text-[36px] md:flex justify-between items-center mb-4">
|
|
<h3>Heading 3</h3>
|
|
<span className=" text-default-600 ">36px</span>
|
|
</div>
|
|
<div className="text-[30px] md:flex justify-between items-center mb-4">
|
|
<h4>Heading 4</h4>
|
|
<span className=" text-default-600 ">30px</span>
|
|
</div>
|
|
<div className="text-[24px] md:flex justify-between items-center mb-4">
|
|
<h5>Heading 5</h5>
|
|
<span className=" text-default-600 ">24px</span>
|
|
</div>
|
|
<div className="text-[20px] md:flex justify-between items-center mb-4">
|
|
<h6>Heading 6</h6>
|
|
<span className=" text-default-600 ">20px</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>HTML headings Light</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-default-600 ">
|
|
All HTML headings are available with light and bold font-weight.
|
|
Use .font-weight-normal for light heading and .
|
|
</div>
|
|
<div className="bg-default-100 text-xs text-default-600 flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
|
|
<span>LIGHT HEADINGS</span>
|
|
<span>BOLD HEADINGS</span>
|
|
</div>
|
|
|
|
<div className="text-[60px] md:flex justify-between items-center mb-4">
|
|
<h1 className="font-normal">Heading</h1>
|
|
<h1 className="font-semibold">Heading</h1>
|
|
</div>
|
|
|
|
<div className="text-[48px] md:flex justify-between items-center mb-4">
|
|
<h2 className="font-normal">Heading 2</h2>
|
|
<h2 className="font-semibold">Heading 2</h2>
|
|
</div>
|
|
|
|
<div className="text-[36px] md:flex justify-between items-center mb-4">
|
|
<h3 className="font-normal">Heading 3</h3>
|
|
<h3 className="font-semibold">Heading 3</h3>
|
|
</div>
|
|
<div className="text-[30px] md:flex justify-between items-center mb-4">
|
|
<h4 className="font-normal">Heading 4</h4>
|
|
<h4 className="font-semibold">Heading 4</h4>
|
|
</div>
|
|
<div className="text-[24px] md:flex justify-between items-center mb-4">
|
|
<h5 className="font-normal">Heading 5</h5>
|
|
<h5 className="font-semibold">Heading 5</h5>
|
|
</div>
|
|
<div className="text-[20px] md:flex justify-between items-center mb-4">
|
|
<h6 className="font-normal">Heading 6</h6>
|
|
<h6 className="font-semibold">Heading 6</h6>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="lg:col-span-2 col-span-1">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Texts</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="-mx-6">
|
|
<table className="w-full border-collapse border-none text-left">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-xs font-semibold bg-default-100 ">
|
|
<span className="px-6 py-5 block text-default-600 ">
|
|
Type
|
|
</span>
|
|
</th>
|
|
<th className="text-xs font-semibold bg-default-100 ">
|
|
<span className="px-6 py-5 block text-default-600 ">
|
|
Class
|
|
</span>
|
|
</th>
|
|
<th className="text-xs font-semibold bg-default-100 ">
|
|
<span className="px-6 py-5 block text-default-600 ">
|
|
Text
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b border-default-100 dark:border-default-700">
|
|
<td className="text-default-900 text-left px-6 py-4 text-lg font-medium">
|
|
Title
|
|
</td>
|
|
<td className="text-default-900 text-lg font-medium text-left t px-6 py-4">
|
|
text-lg
|
|
</td>
|
|
<td className="text-default-900 text-lg font-medium text-left px-6 py-4">
|
|
<div>
|
|
Cupcake ipsum dolor sit amet fruitcake donut
|
|
chocolate.
|
|
</div>
|
|
<div className="text-xs text-default-500 dark:text-default-400 mt-1">
|
|
font-size: 18px / line-height: 28px / font-weight: 500
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-b border-default-100 dark:border-default-700">
|
|
<td className="text-default-700 text-left px-6 py-4 text-base font-normal">
|
|
Sub Title
|
|
</td>
|
|
<td className="text-default-700 text-base font-normaltext-left t px-6 py-4">
|
|
text-base
|
|
</td>
|
|
<td className="text-default-700 text-base font-normal text-left px-6 py-4">
|
|
<div>
|
|
Cupcake ipsum dolor sit amet fruitcake donut
|
|
chocolate.
|
|
</div>
|
|
<div className="text-xs text-default-500 dark:text-default-400 mt-1">
|
|
font-size: 16px / line-height: 24px / font-weight: 400
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr className="border-b border-default-100 dark:border-default-700">
|
|
<td className="text-default-600 text-left px-6 py-4 text-sm font-normal">
|
|
Body Text
|
|
</td>
|
|
<td className="text-default-600 text-base font-sm font-normal text-left t px-6 py-4">
|
|
text-sm
|
|
</td>
|
|
<td className="text-default-600 text-sm font-normal text-left px-6 py-4">
|
|
<div>
|
|
Cupcake ipsum dolor sit amet fruitcake donut
|
|
chocolate.
|
|
</div>
|
|
<div className="text-xs text-default-500 dark:text-default-400 mt-1">
|
|
font-size: 14px / line-height: 20px / font-weight: 400
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="text-default-600 text-left px-6 py-4 text-xs font-normal">
|
|
Small Text
|
|
</td>
|
|
<td className="text-default-600 text-base font-xs font-normal text-left t px-6 py-4">
|
|
text-xs
|
|
</td>
|
|
<td className="text-default-600 text-xs font-normal text-left px-6 py-4">
|
|
<div>
|
|
Cupcake ipsum dolor sit amet fruitcake donut
|
|
chocolate.
|
|
</div>
|
|
<div className="text-xs text-default-500 dark:text-default-400 mt-1">
|
|
font-size: 12px / line-height: 18px / font-weight: 400
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Customizing headings Default</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-default-600 mb-6">
|
|
Use the included utility classes to recreate the small
|
|
secondary-500 heading text.
|
|
</div>
|
|
|
|
<div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
|
|
<h1>Display heading</h1>
|
|
</div>
|
|
<div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
|
|
<h2>Display heading</h2>
|
|
</div>
|
|
<div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
|
|
<h3>Display heading</h3>
|
|
</div>
|
|
<div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
|
|
<h4>Display heading</h4>
|
|
</div>
|
|
<div className="text-[24px] md:flex font-medium justify-between items-center mb-3">
|
|
<h5>Display heading</h5>
|
|
</div>
|
|
<div className="text-[20px] md:flex font-medium justify-between items-center mb-3">
|
|
<h6>Display heading</h6>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Heading colors</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-default-600 mb-6">
|
|
Use the included utility classes to recreate the small
|
|
secondary-500 heading text.
|
|
</div>
|
|
|
|
<div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
|
|
<h1 className="text-default">Display heading</h1>
|
|
</div>
|
|
<div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
|
|
<h2 className="text-primary">Display heading</h2>
|
|
</div>
|
|
<div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
|
|
<h3 className="text-info">Display heading</h3>
|
|
</div>
|
|
<div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
|
|
<h4 className="text-success">Display heading</h4>
|
|
</div>
|
|
<div className="text-[24px] md:flex font-medium justify-between items-center mb-3">
|
|
<h5 className="text-warning">Display heading</h5>
|
|
</div>
|
|
<div className="text-[20px] md:flex font-medium justify-between items-center mb-3">
|
|
<h6 className="text-destructive">Display heading</h6>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Display Headings</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-sm text-default-600 mb-6">
|
|
Traditional heading elements are designed to work best in the
|
|
meat of your page content. When you need a heading to stand out,
|
|
consider using a display heading—a larger, slightly more
|
|
opinionated heading style.
|
|
</div>
|
|
|
|
<div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
|
|
<h1>Display 1</h1>
|
|
</div>
|
|
<div className="text-[48px] md:flex font-medium justify-between items-center mb-3">
|
|
<h2>Display 2</h2>
|
|
</div>
|
|
<div className="text-[36px] md:flex font-medium justify-between items-center mb-3">
|
|
<h3>Display 3</h3>
|
|
</div>
|
|
<div className="text-[30px] md:flex font-medium justify-between items-center mb-3">
|
|
<h4>Display 4</h4>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="space-y-5">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Inline Text Elements</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<p className="text-sm font-light text-default-600 ">
|
|
Styling for common inline HTML5 elements.
|
|
</p>
|
|
<p className="text-sm font-light text-default-900 ">
|
|
<del>
|
|
This line of text is meant to be treated as deleted text.
|
|
</del>
|
|
</p>
|
|
<p className="text-sm font-light text-default-900 ">
|
|
<Link href="#" className="underline">
|
|
This line of text is meant to be treated as an addition to
|
|
the document.
|
|
</Link>
|
|
</p>
|
|
<p className="text-sm font-light text-default-900 ">
|
|
<del>
|
|
This line of text is meant to be treated as deleted text.
|
|
</del>
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="lg:col-span-2 col-span-1">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Text Color</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<p className="text-sm font-light text-default ">
|
|
Styling for common inline HTML5 elements.
|
|
</p>
|
|
<p className="text-sm font-light text-primary">
|
|
Styling for common inline HTML5 elements.
|
|
</p>
|
|
<p className="text-sm font-light text-success">
|
|
Styling for common inline HTML5 elements.
|
|
</p>
|
|
<p className="text-sm font-light text-warning">
|
|
This is warning text You can archive this adding
|
|
.text-warning class
|
|
</p>
|
|
<p className="text-sm font-light text-destructive">
|
|
This is danger text You can archive this adding
|
|
.text-danger class
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="lg:col-span-2 col-span-1">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Listing Typography</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
Unorder list.
|
|
</span>
|
|
<ul className="space-y-3 p-6 rounded-md bg-default-50 ">
|
|
{lists.map((item, i) => (
|
|
<li key={i} className="text-sm text-default-900 ">
|
|
Lorem ipsum dolor sit amet.
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
list-decimal
|
|
</span>
|
|
<ol className="space-y-3 p-6 rounded-md bg-default-50 lits-by-numbaring custom-list">
|
|
<li className="text-sm text-default-900 ">
|
|
<span> Lorem ipsum dolor sit amet.</span>
|
|
<ol className="lits-by-numbaring">
|
|
<li>Lorem ipsum dolor sit amet.</li>
|
|
</ol>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span> Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span> Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span> Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span> Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
Dash list
|
|
</span>
|
|
<ul className="space-y-3 p-6 rounded-md bg-default-50 custom-list">
|
|
<li className="text-sm text-default-900 ">
|
|
<span className="font-medium">
|
|
{" "}
|
|
Lorem ipsum dolor sit amet.
|
|
</span>
|
|
<ul className="lits-by-slash">
|
|
<li>Lorem ipsum dolor sit amet.</li>
|
|
</ul>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span className="font-medium">
|
|
{" "}
|
|
Lorem ipsum dolor sit amet.
|
|
</span>
|
|
<ul className="lits-by-slash">
|
|
<li>Lorem ipsum dolor sit amet.</li>
|
|
</ul>
|
|
</li>
|
|
<li className="text-sm text-default-900 ">
|
|
<span className="font-medium">
|
|
{" "}
|
|
Lorem ipsum dolor sit amet.
|
|
</span>
|
|
<ul className="lits-by-slash">
|
|
<li>Lorem ipsum dolor sit amet.</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
Icon List 1
|
|
</span>
|
|
<ul className="space-y-3 p-6 rounded-md bg-default-50 ">
|
|
{lists.map((item, i) => (
|
|
<li
|
|
key={i}
|
|
className="text-sm text-default-900 flex space-x-2 items-center rtl:space-x-reverse"
|
|
>
|
|
<span>
|
|
<Icon icon="heroicons:chevron-double-right" />
|
|
</span>
|
|
<span>Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
Icon List 2
|
|
</span>
|
|
<ul className="space-y-3 p-6 rounded-md bg-default-50 ">
|
|
{lists.map((item, i) => (
|
|
<li
|
|
key={i}
|
|
className="text-sm text-default-900 flex space-x-2 items-center rtl:space-x-reverse"
|
|
>
|
|
<span>
|
|
<Icon icon="heroicons:chevron-right" />
|
|
</span>
|
|
<span>Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<span className="block text-default-900 font-medium leading-8 text-base mb-6">
|
|
Icon List 3
|
|
</span>
|
|
<ul className="space-y-3 p-6 rounded-md bg-default-50 ">
|
|
{lists.map((item, i) => (
|
|
<li
|
|
key={i}
|
|
className="text-sm text-default-900 flex space-x-2 items-center rtl:space-x-reverse"
|
|
>
|
|
<span className="h-[6px] w-[6px] bg-default-900 rounded-full inline-block"></span>
|
|
<span>Lorem ipsum dolor sit amet.</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<div className="lg:col-span-2">
|
|
<Card>
|
|
<CardHeader className="border-b border-solid mb-6">
|
|
<CardTitle>Blockquotes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-5">
|
|
<blockquote className=" italic text-xl text-default-900 ">
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Accusamus laudantium omnis fugit ducimus nulla libero
|
|
temporibus corrupti non voluptatem harum?
|
|
<span className="text-sm text-default-400 block mt-3">
|
|
Dashcode Admin Template
|
|
</span>
|
|
</blockquote>
|
|
<blockquote className=" italic text-xl border-primary-500 text-right text-default-900 ">
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Accusamus laudantium omnis fugit ducimus nulla libero
|
|
temporibus corrupti non voluptatem harum?
|
|
<span className="text-sm text-default-400 block mt-3">
|
|
Dashcode Admin Template
|
|
</span>
|
|
</blockquote>
|
|
<blockquote className=" italic text-xl border-success-500 text-center text-default-900 ">
|
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Accusamus laudantium omnis fugit ducimus nulla libero
|
|
temporibus corrupti non voluptatem harum?
|
|
<span className="text-sm text-default-400 block mt-3">
|
|
Dashcode Admin Template
|
|
</span>
|
|
</blockquote>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Typography;
|