-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.astro
92 lines (89 loc) · 4.02 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
---
import BaseLayout from "@/layouts/BaseLayout.astro";
---
<BaseLayout>
<section class="bg-white relative overflow-hidden">
<div
class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
<div class="max-w-xl mx-auto text-center">
<div
class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
<div>
<h1>Layout switcher</h1>
<p class="text-balance">
Click the button below to switch between 2 and 4 columns.
</p>
</div>
</div>
</div>
<!-- Starts component -->
<div
class="max-w-3xl mx-auto flex flex-col mt-6 border-t pt-12"
x-data="{ isFourColumns: true }">
<div class="flex justify-center">
<!-- Toggle Button -->
<button
@click="isFourColumns = !isFourColumns"
class="rounded-full bg-blue-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 w-auto"
x-text="isFourColumns ? 'Switch to 2 Columns' : 'Switch to 4 Columns'">
</button>
</div>
<!-- Grid Layout -->
<div
:class="{'grid-cols-4': isFourColumns, 'grid-cols-2': !isFourColumns}"
class="grid gap-2 mt-4">
<!-- Items in the Grid -->
<div class="bg-gray-100 rounded-lg p-8">Item 1</div>
<div class="bg-gray-100 rounded-lg p-8">Item 2</div>
<div class="bg-gray-100 rounded-lg p-8">Item 3</div>
<div class="bg-gray-100 rounded-lg p-8">Item 4</div>
<div class="bg-gray-100 rounded-lg p-8">Item 5</div>
<div class="bg-gray-100 rounded-lg p-8">Item 6</div>
<div class="bg-gray-100 rounded-lg p-8">Item 7</div>
<div class="bg-gray-100 rounded-lg p-8">Item 8</div>
</div>
</div>
<!-- Ends component -->
<!-- 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 create a grid toggle with Tailwind CSS and Alpinejs
</p>
<p class="mt-2 text-xs text-orange-600 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-grid-toggle-with-tailwind-css-and-alpinejs/"
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-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600"
>Tutorial</a
>
</div>
<div class="flex h-0 flex-1">
<a
href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/gridtoggle/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-600"
>Get the code</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Ends links to tutorial -->
</div>
</section>
</BaseLayout>