Skip to content

Commit 1558739

Browse files
dragosctdragosct
authored
Merge pull request creativetimofficial#827 from creativetimofficial/@material-tailwind/html-new-comps-aa
@Material tailwind/html new comps aa
2 parents 47a4ae0 + 906e074 commit 1558739

15 files changed

+1447
-0
lines changed

‎docs-content/html/card/card-with-placeholder.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export function CardWithPlaceholder() {
2+
return (
3+
<div className="relative min-h-60 w-full flex flex-col justify-center items-center my-6 bg-white shadow-sm border border-slate-200 rounded-lg p-2">
4+
<div className="p-3 text-center">
5+
<div className="flex justify-center mb-4">
6+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="text-slate-400 w-10 h-10">
7+
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" />
8+
</svg>
9+
</div>
10+
<div className="flex justify-center mb-2">
11+
<h5 className="text-slate-800 text-2xl font-semibold">
12+
No data sources linked.
13+
</h5>
14+
</div>
15+
<p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
16+
No APIs created yet. Contact us for more details.
17+
</p>
18+
</div>
19+
</div>
20+
21+
);
22+
}

‎docs-content/html/card/card-with-scroll-area.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export function CardWithScrollArea() {
2+
return (
3+
<div className="relative w-96 bg-white shadow-sm border border-slate-200 rounded-lg p-3 pb-6">
4+
<div className="flex justify-center mb-4 mt-5">
5+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="w-10 h-10 text-purple-500">
6+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
7+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
8+
</svg>
9+
</div>
10+
11+
<div className="flex justify-center mb-3">
12+
<h5 className="text-slate-800 text-2xl font-semibold">
13+
Scrollable Content
14+
</h5>
15+
</div>
16+
<div className="p-3 mt-5 border-t border-slate-100 text-center max-h-60 overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-xl [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-xl [&::-webkit-scrollbar-track]:bg-slate-100">
17+
<p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
18+
Because it&apos;s about motivating the doers. Because I&apos;m here to follow my dreams and inspire others. Here is some additional text to test the scrolling feature. Imagine this is a long article that you can scroll through.
19+
</p> <br/>
20+
<p className="block text-slate-600 leading-normal font-light mb-4 max-w-lg">
21+
Still more content to keep the scroll active. Let's make sure the scrollbar styling is correct. Apple's scrollbar style is subtle, with a thin, sleek design. Scroll down for more! Keep adding more content to ensure the scroll is working. The card's content should now be scrollable. Test it out!
22+
More text to fill the space, as we continue to check how scroll behaves.
23+
</p>
24+
</div>
25+
</div>
26+
27+
);
28+
}

‎docs-content/html/card/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,6 @@ export * from "./card-with-bottom-image";
2121
export * from "./card-with-animation";
2222
export * from "./card-with-alert";
2323
export * from "./card-with-centered-content";
24+
export * from "./card-with-placeholder";
25+
export * from "./card-with-scroll-area";
2426
export * from "./card-with-hover";

‎docs-content/html/modal/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export * from "./modal-default";
2+
export * from "./modal-sizes";
3+
export * from "./web-3-modal";
4+
export * from "./modal-custom-animation";
5+
export * from "./modal-with-form";
6+
export * from "./modal-with-image";
7+

‎docs-content/html/modal/modal-custom-animation.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export function ModalCustomAnimation() {
2+
return (
3+
<>
4+
<button
5+
data-dialog-target="animated-modal"
6+
className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
7+
Open Animation Modal
8+
</button>
9+
<div
10+
data-dialog-backdrop="animated-modal"
11+
data-dialog-backdrop-close="true"
12+
className="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"
13+
>
14+
<div
15+
data-dialog="animated-modal"
16+
data-dialog-mount="opacity-100 translate-y-0 scale-100"
17+
data-dialog-unmount="opacity-0 -translate-y-28 scale-90 pointer-events-none"
18+
data-dialog-transition="transition-all duration-300"
19+
className="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"
20+
>
21+
<div className="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">
22+
Custom Animation Modal
23+
</div>
24+
<div className="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">
25+
The key to more success is to have a lot of pillows. Put it this
26+
way, it took me twenty five years to get these plants, twenty five
27+
years of blood sweat and tears, and I&apos;m never giving up,
28+
I&apos;m just getting started. I&apos;m up to something. Fan luv.
29+
</div>
30+
<div className="flex shrink-0 flex-wrap items-center pt-4 justify-end">
31+
<button data-dialog-close="true" className="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
32+
Cancel
33+
</button>
34+
<button data-dialog-close="true" className="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
35+
Confirm
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
</>
41+
);
42+
}

‎docs-content/html/modal/modal-default.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
export function ModalDefault() {
2+
return (
3+
<>
4+
<button
5+
data-dialog-target="modal"
6+
className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
7+
Open Modal
8+
</button>
9+
<div
10+
data-dialog-backdrop="modal"
11+
data-dialog-backdrop-close="true"
12+
className="pointer-events-none fixed inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 opacity-0 backdrop-blur-sm transition-opacity duration-300"
13+
>
14+
<div
15+
data-dialog="modal"
16+
className="relative m-4 p-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white shadow-sm"
17+
>
18+
<div className="flex shrink-0 items-center pb-4 text-xl font-medium text-slate-800">
19+
Its a simple Modal
20+
</div>
21+
<div className="relative border-t border-slate-200 py-4 leading-normal text-slate-600 font-light">
22+
The key to more success is to have a lot of pillows. Put it this
23+
way, it took me twenty five years to get these plants, twenty five
24+
years of blood sweat and tears, and I&apos;m never giving up,
25+
I&apos;m just getting started. I&apos;m up to something. Fan luv.
26+
</div>
27+
<div className="flex shrink-0 flex-wrap items-center pt-4 justify-end">
28+
<button data-dialog-close="true" className="rounded-md border border-transparent py-2 px-4 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
29+
Cancel
30+
</button>
31+
<button data-dialog-close="true" className="rounded-md bg-green-600 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-green-700 focus:shadow-none active:bg-green-700 hover:bg-green-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
32+
Confirm
33+
</button>
34+
</div>
35+
</div>
36+
</div>
37+
</>
38+
);
39+
}

0 commit comments

Comments
 (0)