Add some more examples
This commit is contained in:
Ryan Gossiaux
100
src/routes/radio-group/radio-group.svelte
Normal file
100
src/routes/radio-group/radio-group.svelte
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { RadioGroup, RadioGroupOption } from "$lib";
|
||||||
|
function classNames(...classes) {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
}
|
||||||
|
let access = [
|
||||||
|
{
|
||||||
|
id: "access-1",
|
||||||
|
name: "Public access",
|
||||||
|
description: "This project would be available to anyone who has the link",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "access-2",
|
||||||
|
name: "Private to Project Members",
|
||||||
|
description: "Only members of this project would be able to access",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "access-3",
|
||||||
|
name: "Private to you",
|
||||||
|
description: "You are the only one able to access this project",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
let active;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="p-12 max-w-xl">
|
||||||
|
<a href="/">Link before</a>
|
||||||
|
<RadioGroup
|
||||||
|
value={active}
|
||||||
|
on:updateValue={(event) => (active = event.detail)}
|
||||||
|
>
|
||||||
|
<fieldset class="space-y-4">
|
||||||
|
<legend>
|
||||||
|
<h2 class="text-xl">Privacy setting</h2>
|
||||||
|
</legend>
|
||||||
|
|
||||||
|
<div class="bg-white rounded-md -space-y-px">
|
||||||
|
{#each access as { id, name, description }, i (id)}
|
||||||
|
<RadioGroupOption
|
||||||
|
value={id}
|
||||||
|
class={({ active }) =>
|
||||||
|
classNames(
|
||||||
|
// Rounded corners
|
||||||
|
i === 0 && "rounded-tl-md rounded-tr-md",
|
||||||
|
access.length - 1 === i && "rounded-bl-md rounded-br-md",
|
||||||
|
|
||||||
|
// Shared
|
||||||
|
"relative border p-4 flex focus:outline-none",
|
||||||
|
active
|
||||||
|
? "bg-indigo-50 border-indigo-200 z-10"
|
||||||
|
: "border-gray-200"
|
||||||
|
)}
|
||||||
|
let:active
|
||||||
|
let:checked
|
||||||
|
>
|
||||||
|
<div class="flex justify-between items-center w-full">
|
||||||
|
<div class="ml-3 flex flex-col cursor-pointer">
|
||||||
|
<span
|
||||||
|
class={classNames(
|
||||||
|
"block text-sm leading-5 font-medium",
|
||||||
|
active ? "text-indigo-900" : "text-gray-900"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class={classNames(
|
||||||
|
"block text-sm leading-5",
|
||||||
|
active ? "text-indigo-700" : "text-gray-500"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{#if checked}
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="h-5 w-5 text-indigo-500"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width={2}
|
||||||
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RadioGroupOption>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</RadioGroup>
|
||||||
|
<a href="/">Link after</a>
|
||||||
|
</div>
|
||||||
34
src/routes/switch/switch-with-pure-tailwind.svelte
Normal file
34
src/routes/switch/switch-with-pure-tailwind.svelte
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Switch, SwitchGroup, SwitchLabel } from "$lib";
|
||||||
|
|
||||||
|
function classNames(...classes) {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
let state = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex items-start justify-center w-screen h-full p-12 bg-gray-50">
|
||||||
|
<SwitchGroup as="div" class="flex items-center space-x-4">
|
||||||
|
<SwitchLabel>Enable notifications</SwitchLabel>
|
||||||
|
|
||||||
|
<Switch
|
||||||
|
as="button"
|
||||||
|
checked={state}
|
||||||
|
on:updateValue={(event) => (state = event.detail)}
|
||||||
|
class={({ checked }) =>
|
||||||
|
classNames(
|
||||||
|
"relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
|
||||||
|
checked ? "bg-indigo-600" : "bg-gray-200"
|
||||||
|
)}
|
||||||
|
let:checked
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class={classNames(
|
||||||
|
"inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200",
|
||||||
|
checked ? "translate-x-5" : "translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</SwitchGroup>
|
||||||
|
</div>
|
||||||
94
src/routes/tabs/tabs-with-pure-tailwind.svelte
Normal file
94
src/routes/tabs/tabs-with-pure-tailwind.svelte
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
Switch,
|
||||||
|
SwitchGroup,
|
||||||
|
SwitchLabel,
|
||||||
|
Tab,
|
||||||
|
TabGroup,
|
||||||
|
TabList,
|
||||||
|
TabPanel,
|
||||||
|
TabPanels,
|
||||||
|
} from "$lib";
|
||||||
|
|
||||||
|
function classNames(...classes) {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
let tabs = [
|
||||||
|
{ name: "My Account", content: "Tab content for my account" },
|
||||||
|
{ name: "Company", content: "Tab content for company", disabled: true },
|
||||||
|
{ name: "Team Members", content: "Tab content for team members" },
|
||||||
|
{ name: "Billing", content: "Tab content for billing" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let manual = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col items-start w-screen h-full p-12 bg-gray-50 space-y-12"
|
||||||
|
>
|
||||||
|
<SwitchGroup as="div" class="flex items-center space-x-4">
|
||||||
|
<SwitchLabel>Manual keyboard activation</SwitchLabel>
|
||||||
|
|
||||||
|
<Switch
|
||||||
|
as="button"
|
||||||
|
checked={manual}
|
||||||
|
on:updateValue={(event) => (manual = event.detail)}
|
||||||
|
class={({ checked }) =>
|
||||||
|
classNames(
|
||||||
|
"relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200",
|
||||||
|
checked ? "bg-indigo-600" : "bg-gray-200"
|
||||||
|
)}
|
||||||
|
let:checked
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class={classNames(
|
||||||
|
"inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200",
|
||||||
|
checked ? "translate-x-5" : "translate-x-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</SwitchGroup>
|
||||||
|
|
||||||
|
<TabGroup class="flex flex-col max-w-3xl w-full" as="div" {manual}>
|
||||||
|
<TabList
|
||||||
|
class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200"
|
||||||
|
>
|
||||||
|
{#each tabs as tab, tabIdx (tab.name)}
|
||||||
|
<Tab
|
||||||
|
key={tab.name}
|
||||||
|
disabled={tab.disabled}
|
||||||
|
class={({ selected }) =>
|
||||||
|
classNames(
|
||||||
|
selected ? "text-gray-900" : "text-gray-500 hover:text-gray-700",
|
||||||
|
tabIdx === 0 ? "rounded-l-lg" : "",
|
||||||
|
tabIdx === tabs.length - 1 ? "rounded-r-lg" : "",
|
||||||
|
tab.disabled && "opacity-50",
|
||||||
|
"group relative min-w-0 flex-1 overflow-hidden bg-white py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 focus:z-10"
|
||||||
|
)}
|
||||||
|
let:selected
|
||||||
|
>
|
||||||
|
<span>{tab.name}</span>
|
||||||
|
{#if tab.disabled}
|
||||||
|
<small class="inline-block px-4 text-xs">(disabled)</small>
|
||||||
|
<span
|
||||||
|
aria-hidden="true"
|
||||||
|
class={classNames(
|
||||||
|
selected ? "bg-indigo-500" : "bg-transparent",
|
||||||
|
"absolute inset-x-0 bottom-0 h-0.5"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</Tab>
|
||||||
|
{/each}
|
||||||
|
</TabList>
|
||||||
|
|
||||||
|
<TabPanels class="mt-4">
|
||||||
|
{#each tabs as tab (tab.name)}
|
||||||
|
<TabPanel class="bg-white rounded-lg p-4 shadow" key={tab.name}>
|
||||||
|
{tab.content}
|
||||||
|
</TabPanel>
|
||||||
|
{/each}
|
||||||
|
</TabPanels>
|
||||||
|
</TabGroup>
|
||||||
|
</div>
|
||||||
90
src/routes/transitions/component-examples/dropdown.svelte
Normal file
90
src/routes/transitions/component-examples/dropdown.svelte
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Transition } from "$lib";
|
||||||
|
|
||||||
|
let open = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Transition Component - Playground</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
|
||||||
|
<div class="relative inline-block text-left">
|
||||||
|
<div>
|
||||||
|
<span class="rounded-md shadow-sm">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800"
|
||||||
|
id="options-menu"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={open || undefined}
|
||||||
|
on:click={() => (open = !open)}
|
||||||
|
>
|
||||||
|
Options
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 ml-2 -mr-1"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={open}
|
||||||
|
enter="transition ease-out duration-75"
|
||||||
|
enterFrom="transform opacity-0 scale-95"
|
||||||
|
enterTo="transform opacity-100 scale-100"
|
||||||
|
leave="transition ease-in duration-150"
|
||||||
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
|
leaveTo="transform opacity-0 scale-95"
|
||||||
|
class="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg"
|
||||||
|
>
|
||||||
|
<div class="bg-white rounded-md shadow-xs">
|
||||||
|
<div
|
||||||
|
class="py-1"
|
||||||
|
role="menu"
|
||||||
|
aria-orientation="vertical"
|
||||||
|
aria-labelledby="options-menu"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
Account settings
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
License
|
||||||
|
</a>
|
||||||
|
<form method="POST" action="#">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="block w-full px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
Sign out
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
173
src/routes/transitions/component-examples/modal.svelte
Normal file
173
src/routes/transitions/component-examples/modal.svelte
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Transition, TransitionChild } from "$lib";
|
||||||
|
|
||||||
|
let isOpen = false;
|
||||||
|
function toggle() {
|
||||||
|
isOpen = !isOpen;
|
||||||
|
}
|
||||||
|
|
||||||
|
let email = "";
|
||||||
|
let events: string[] = [];
|
||||||
|
let inputRef: HTMLElement | null = null;
|
||||||
|
|
||||||
|
function addEvent(name: string) {
|
||||||
|
events = [...events, `${new Date().toJSON()} - ${name}`];
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex p-12 space-x-4">
|
||||||
|
<div class="inline-block p-12">
|
||||||
|
<span class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">
|
||||||
|
<button
|
||||||
|
on:click={toggle}
|
||||||
|
type="button"
|
||||||
|
class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue sm:text-sm sm:leading-5"
|
||||||
|
>
|
||||||
|
Show modal
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="p-4 text-gray-900 bg-gray-200">
|
||||||
|
<h3 class="font-bold">Events:</h3>
|
||||||
|
{#each events as event}
|
||||||
|
<li class="font-mono text-sm">
|
||||||
|
{event}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
show={isOpen}
|
||||||
|
class="fixed inset-0 z-10 overflow-y-auto"
|
||||||
|
on:beforeEnter={() => {
|
||||||
|
addEvent("Before enter");
|
||||||
|
}}
|
||||||
|
on:afterEnter={() => {
|
||||||
|
inputRef?.focus();
|
||||||
|
addEvent("After enter");
|
||||||
|
}}
|
||||||
|
on:beforeLeave={() => {
|
||||||
|
addEvent("Before leave (before confirm)");
|
||||||
|
window.confirm("Are you sure?");
|
||||||
|
addEvent("Before leave (after confirm)");
|
||||||
|
}}
|
||||||
|
on:afterLeave={(event) => {
|
||||||
|
addEvent(`After leave (before alert)`);
|
||||||
|
window.alert("Consider it done!");
|
||||||
|
addEvent(`After leave (after alert)`);
|
||||||
|
email = "";
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
|
||||||
|
>
|
||||||
|
<TransitionChild
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
|
>
|
||||||
|
<div class="fixed inset-0 transition-opacity">
|
||||||
|
<div class="absolute inset-0 bg-gray-500 opacity-75" />
|
||||||
|
</div>
|
||||||
|
</TransitionChild>
|
||||||
|
<!-- This element is to trick the browser into centering the modal contents. -->
|
||||||
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" />​
|
||||||
|
<TransitionChild
|
||||||
|
class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="modal-headline"
|
||||||
|
enter="ease-out duration-300"
|
||||||
|
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
leave="ease-in duration-200"
|
||||||
|
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||||
|
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||||
|
>
|
||||||
|
<div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
|
||||||
|
<div class="sm:flex sm:items-start">
|
||||||
|
<div
|
||||||
|
class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10"
|
||||||
|
>
|
||||||
|
<!-- Heroicon name: exclamation -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-red-600"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||||||
|
<h3
|
||||||
|
class="text-lg font-medium leading-6 text-gray-900"
|
||||||
|
id="modal-headline"
|
||||||
|
>
|
||||||
|
Deactivate account
|
||||||
|
</h3>
|
||||||
|
<div class="mt-2">
|
||||||
|
<p class="text-sm leading-5 text-gray-500">
|
||||||
|
Are you sure you want to deactivate your account? All of your
|
||||||
|
data will be permanently removed. This action cannot be
|
||||||
|
undone.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<div>
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<label
|
||||||
|
html-for="email"
|
||||||
|
class="block text-sm font-medium leading-5 text-gray-700"
|
||||||
|
>
|
||||||
|
Email address
|
||||||
|
</label>
|
||||||
|
<div class="relative mt-1 rounded-md shadow-sm">
|
||||||
|
<input
|
||||||
|
bind:this={inputRef}
|
||||||
|
bind:value={email}
|
||||||
|
id="email"
|
||||||
|
class="block w-full px-3 form-input sm:text-sm sm:leading-5"
|
||||||
|
placeholder="name@example.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
|
||||||
|
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red sm:text-sm sm:leading-5"
|
||||||
|
>
|
||||||
|
Deactivate
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<span class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">
|
||||||
|
<button
|
||||||
|
on:click={toggle}
|
||||||
|
type="button"
|
||||||
|
class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue sm:text-sm sm:leading-5"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</TransitionChild>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user