-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.astro
197 lines (192 loc) · 8.07 KB
/
index.astro
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
---
import BaseLayout from "@/layouts/BaseLayout.astro";
---
<BaseLayout>
<!-- Starts component -->
<div id="app">
<div
id="modal"
class="hidden fixed flex-col z-50 bottom-[100px] top-0 ring-0 left-0 sm:top-auto sm:right-5 sm:left-auto h-[calc(100%-95px)] w-full sm:w-[350px] overflow-auto min-h-[250px] sm:h-[600px] bg-white shadow-2xl rounded-xl transition-opacity duration-200 ease transform">
<div
class="flex p-5 lg:py-20 flex-col justify-center items-center h-32 bg-gradient-to-t from-gray-200 to-gray-100">
<div>
<div class="flex -space-x-2 py-2">
<img
class="inline-block size-8 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="#"
/>
<img
class="inline-block size-8 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="#"
/>
<img
class="inline-block size-8 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
alt="#"
/>
<img
class="inline-block size-8 rounded-full ring-2 ring-white"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt="#"
/>
</div>
</div>
<h3 class="text-black">Got any questions?</h3>
<p class="text-gray-500 text-sm mt-2">
Typically replies under 47 minutes
</p>
</div>
<div
class="bg-white rounded-t-3xl flex flex-col justify-between h-full p-6">
<div class="flex w-full mt-2 space-x-3 max-w-xs">
<img
class="flex-shrink-0 size-10 rounded-full bg-gray-300"
src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
<div>
<div class="bg-blue-500 p-3 rounded-r-lg rounded-bl-lg">
<p class="text-sm text-white">
Hey, How are can we help you? We recommend to checkout our
documentation and get started, we don't really know much
anyways.
</p>
</div>
<span class="text-xs text-gray-500 leading-none">2 min ago</span>
</div>
</div>
<div class="border-t mt-4">
<input
class="flex items-center h-14 w-full rounded-xl border-0 px-3 text-sm"
type="text"
placeholder="Type your message…"
/>
</div>
</div>
</div>
<button
id="toggleButton"
class="fixed z-40 right-5 bottom-5 shadow-lg flex justify-center items-center size-14 bg-blue-600 rounded-full focus:outline-none hover:bg-blue-600 focus:bg-blue-600 transition duration-300 ease">
<svg
id="openIcon"
class="w-6 h-6 text-white absolute"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
></path>
</svg>
<svg
id="closeIcon"
class="w-6 h-6 text-white absolute hidden"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<line
x1="18"
y1="6"
x2="6"
y2="18"
></line>
<line
x1="6"
y1="6"
x2="18"
y2="18"
></line>
</svg>
</button>
</div>
<!-- Starts links to tutorial -->
<div
class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
<div
class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
<div class="flex w-0 flex-1 items-center p-4">
<div class="w-full">
<p class="text-sm font-medium text-neutral-900">Tutorial</p>
<p class="mt-1 text-sm text-neutral-500">
How to a create a chat bubble with Tailwind CSS and JavaScript
</p>
<p class="mt-2 text-xs text-orange-500 underline">
<a href="https://lexingtonthemes.com"> by © Lexington Themes</a>
</p>
</div>
</div>
<div class="flex">
<div class="flex flex-col divide-y divide-neutral-200">
<div class="flex h-0 flex-1">
<a
href="https://lexingtonthemes.com/tutorials/how-to-create-a-chat-bubble-with-tailwind-css-and-javascript"
type="button"
class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500"
>Tutorial</a
>
</div>
<div class="flex h-0 flex-1">
<a
href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/jschatbubble/index.astro"
class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500"
>Get the code</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Ends links to tutorial -->
<!-- Starts component -->
</BaseLayout>
<script type="module">
document.addEventListener("DOMContentLoaded", function () {
var modal = document.getElementById("modal");
var toggleButton = document.getElementById("toggleButton");
var openIcon = document.getElementById("openIcon");
var closeIcon = document.getElementById("closeIcon");
toggleButton.addEventListener("click", function () {
var isHidden = modal.classList.contains("hidden");
if (isHidden) {
modal.classList.remove("hidden");
modal.classList.add("flex");
setTimeout(function () {
modal.classList.remove("opacity-0", "translate-y-5");
}, 10); // timeout for transition effect
openIcon.classList.add("hidden");
closeIcon.classList.remove("hidden");
} else {
modal.classList.add("opacity-0", "translate-y-5");
setTimeout(function () {
modal.classList.add("hidden");
modal.classList.remove("flex");
}, 200); // match transition duration
openIcon.classList.remove("hidden");
closeIcon.classList.add("hidden");
}
});
document.addEventListener("click", function (event) {
if (
!modal.contains(event.target) &&
!toggleButton.contains(event.target)
) {
modal.classList.add("opacity-0", "translate-y-5");
setTimeout(function () {
modal.classList.add("hidden");
modal.classList.remove("flex");
}, 200);
openIcon.classList.remove("hidden");
closeIcon.classList.add("hidden");
}
});
});
</script>