mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use icons from astro-icon

Browse Source
This commit is contained in:
prototypa
2022-08-26 23:13:09 -04:00
parent 01f4cb2f6f
commit aaac66b82a
18 changed files with 111 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/widgets/BasicFAQs.astro
View File

@ -1,5 +1,5 @@
---
import { IconArrowDownRight } from "~/components/icons";
import { Icon } from "astro-icon";
const {} = Astro.props;
---
@ -18,7 +18,10 @@ const {} = Astro.props;
<div class="space-y-8">
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What do I need to start?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -32,7 +35,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
How to install the Astro + Tailwind CSS template?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -49,7 +55,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What's something that you completely don't understand?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -62,7 +71,10 @@ const {} = Astro.props;
<div class="space-y-8">
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What's an example of when you changed your mind?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -74,7 +86,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
What is something that you would really like to try again?
</p>
<p class="text-gray-700 dark:text-gray-400 mb-2">
@ -88,7 +103,10 @@ const {} = Astro.props;
</div>
<div>
<p class="mb-4 text-xl font-bold">
<IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
<Icon
name="tabler:arrow-down-right"
class="w-7 h-7 text-blue-500 inline-block icon-bold"
/>
If you could only ask one question to each person you meet, what would
that question be?
</p>

122
src/components/widgets/BasicFeatures.astro
View File

@ -1,145 +1,111 @@
---
import { Icon } from "astro-icon";
const {} = Astro.props;
---
<section class="relative">
<div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
<div
class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32"
aria-hidden="true"
>
</div>
<div class="relative max-w-6xl mx-auto px-4 sm:px-6">
<div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
<div class="mb-8 text-center">
<p class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase">Components</p>
<h2 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4">Most used widgets</h2>
<p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400">
Provides frequently used components for building websites using Tailwind CSS
<p
class="text-base text-blue-600 dark:text-blue-200 font-semibold tracking-wide uppercase"
>
Components
</p>
<h2
class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-4"
>
Most used widgets
</h2>
<p
class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400"
>
Provides frequently used components for building websites using
Tailwind CSS
</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white">
<div
class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 items-start my-12 dark:text-white"
>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:home" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Headers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:faq" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Footers</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:video-projector" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Features</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:in-transit" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Call-to-Action</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:calculator" class="w-12 h-12" />
<div class="ml-4 text-xl font-bold">Pricing</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
<div
class="relative flex flex-col p-6 bg-white dark:bg-slate-900 rounded shadow-xl hover:shadow-lg transition dark:border dark:border-slate-800"
>
<div class="flex items-center mb-4">
<svg class="w-12 h-12 p-1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-blue-600" width="64" height="64" rx="32"></rect>
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z"></path>
<path class="stroke-current text-blue-300" d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58">
</path>
</g>
</g>
</svg>
<Icon name="flat-color-icons:voice-presentation" class="w-12 h-12"
/>
<div class="ml-4 text-xl font-bold">Testimonial</div>
</div>
<p class="text-gray-500 dark:text-gray-400 text-md">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore.
</p>
</div>
</div>

20
src/components/widgets/Footer.astro
View File

@ -1,11 +1,6 @@
---
import {
IconTwitter,
IconInstagram,
IconFacebook,
IconArrowRight,
IconRSS,
} from "~/components/icons";
import { Icon } from "astro-icon";
const {} = Astro.props;
---
@ -186,7 +181,8 @@ const {} = Astro.props;
class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600"
aria-hidden="true"></span>
<IconArrowRight
<Icon
name="tabler:arrow-right"
class="w-5 h-5 text-blue-600 mx-3 flex-shrink-0"
/>
</button>
@ -204,7 +200,7 @@ const {} = Astro.props;
aria-label="Twitter"
href="#"
>
<IconTwitter />
<Icon name="tabler:brand-twitter" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -213,7 +209,7 @@ const {} = Astro.props;
aria-label="Instagram"
href="#"
>
<IconInstagram />
<Icon name="tabler:brand-instagram" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -222,7 +218,7 @@ const {} = Astro.props;
aria-label="Facebook"
href="#"
>
<IconFacebook />
<Icon name="tabler:brand-facebook" class="w-5 h-5" />
</a>
</li>
<li class="ml-4">
@ -231,7 +227,7 @@ const {} = Astro.props;
aria-label="Twitter"
href="/rss.xml"
>
<IconRSS />
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
</li>
</ul>

13
src/components/widgets/Header.astro
View File

@ -1,6 +1,7 @@
---
import { IconSun, IconGithub, IconMenu, IconRSS } from "~/components/icons";
import { Icon } from "astro-icon";
import Logo from "~/components/widgets/Logo.astro";
const {} = Astro.props;
---
@ -21,14 +22,14 @@ const {} = Astro.props;
aria-label="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<IconSun class="w-6 h-6" />
<Icon name="tabler:sun" class="w-6 h-6" />
</button>
<button
class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
aria-label="Toggle Menu"
data-aw-toggle-menu
>
<IconMenu class="w-6 h-6" />
<Icon name="tabler:menu" class="w-6 h-6" />
</button>
</div>
</div>
@ -80,21 +81,21 @@ const {} = Astro.props;
aria-label="Toggle between Dark and Light mode"
data-aw-toggle-color-scheme
>
<IconSun />
<Icon name="tabler:sun" class="w-5 h-5" />
</button>
<a
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
aria-label="RSS Feed"
href="/rss.xml"
>
<IconRSS />
<Icon name="tabler:rss" class="w-5 h-5" />
</a>
<a
href="https://github.com/onwidget/astrowind"
class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1"
aria-label="Astrowind Github"
>
<IconGithub />
<Icon name="tabler:brand-github" class="w-5 h-5" />
</a>
</div>
</div>

87
src/components/widgets/StepsLeft.astro
View File

@ -1,5 +1,7 @@
---
import { Icon } from "astro-icon";
import Picture from "~/components/core/Picture.astro";
const {} = Astro.props;
---
@ -12,24 +14,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -52,24 +40,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -91,24 +65,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
>
</path>
</svg>
<Icon
name="tabler:arrow-down"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
<div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
@ -130,21 +90,10 @@ const {} = Astro.props;
<div
class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 text-gray-600 dark:text-slate-200"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l5 5l10 -10"></path>
</svg>
<Icon
name="tabler:check"
class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold"
/>
</div>
</div>
</div>