Add new authentication components and footer section
Introduced new user interface components used for authentication pages, including LoginModal, RegisterModal, RecoverModal, and associated input elements. Added a comprehensive FooterSection containing links to main site areas and social media platforms. These updates enhance the usability and functionality of the application's user registration and navigation.
This commit is contained in:
Emil Gulamov
parent
6610a27857
commit
aa2662df78
16 changed files with 919 additions and 0 deletions
15
src/components/Authentication.astro
Normal file
15
src/components/Authentication.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import LoginModal from "./ui/authentication/LoginModal.astro";
|
||||||
|
import RegisterModal from "./ui/authentication/RegisterModal.astro";
|
||||||
|
import RecoverModal from "./ui/authentication/RecoverModal.astro";
|
||||||
|
import LoginBtn from "./ui/buttons/LoginBtn.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<LoginBtn />
|
||||||
|
|
||||||
|
<LoginModal />
|
||||||
|
|
||||||
|
<RegisterModal />
|
||||||
|
|
||||||
|
<RecoverModal />
|
||||||
265
src/components/FooterSection.astro
Normal file
265
src/components/FooterSection.astro
Normal file
|
|
@ -0,0 +1,265 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import FooterSocialLink from "./ui/links/FooterSocialLink.astro";
|
||||||
|
import EmailFooterInput from "./ui/authentication/input/EmailFooterInput.astro";
|
||||||
|
|
||||||
|
// Footer Section Names
|
||||||
|
const sectionOne: string = "Product";
|
||||||
|
const sectionTwo: string = "Company";
|
||||||
|
const sectionThree: string = "Stay up to date";
|
||||||
|
|
||||||
|
/* `content` variable used to customise the email subscription content text. */
|
||||||
|
const content: string =
|
||||||
|
"Stay updated with the latest tools and exclusive deals.";
|
||||||
|
|
||||||
|
/* TypeScript type for links. */
|
||||||
|
type Links = {
|
||||||
|
title: string;
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* An array of links, each being an object that conforms to the above `Links` type. */
|
||||||
|
const product: Links[] = [
|
||||||
|
{
|
||||||
|
title: "Tools & Equipment",
|
||||||
|
url: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Construction Services",
|
||||||
|
url: "/services",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Pricing",
|
||||||
|
url: "#",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/* An array of links, each being an object that conforms to the above `Links` type. */
|
||||||
|
const company: Links[] = [
|
||||||
|
{
|
||||||
|
title: "About us",
|
||||||
|
url: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Blog",
|
||||||
|
url: "/blog",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Careers",
|
||||||
|
url: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Customers",
|
||||||
|
url: "#",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer class="w-full bg-neutral-300 dark:bg-neutral-900">
|
||||||
|
<div class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:pt-20">
|
||||||
|
<div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
|
||||||
|
<div class="col-span-full lg:col-span-1">
|
||||||
|
<a
|
||||||
|
class="flex-none rounded-lg text-xl font-semibold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
||||||
|
href="/"
|
||||||
|
aria-label="Brand"
|
||||||
|
>
|
||||||
|
<!-- Brand Logo -->
|
||||||
|
<svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
|
||||||
|
<rect
|
||||||
|
width="78.937"
|
||||||
|
height="18.485"
|
||||||
|
x="269"
|
||||||
|
y="154.911"
|
||||||
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||||
|
fill="currentColor"
|
||||||
|
rx="9.242"
|
||||||
|
transform="rotate(-43.075 269 154.911)"></rect>
|
||||||
|
<rect
|
||||||
|
width="78.937"
|
||||||
|
height="18.485"
|
||||||
|
x="319"
|
||||||
|
y="154.911"
|
||||||
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||||
|
fill="currentColor"
|
||||||
|
rx="9.242"
|
||||||
|
transform="rotate(-43.075 319 154.911)"></rect>
|
||||||
|
<rect
|
||||||
|
width="78.937"
|
||||||
|
height="18.485"
|
||||||
|
x="369.285"
|
||||||
|
y="154.911"
|
||||||
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||||
|
fill="currentColor"
|
||||||
|
rx="9.242"
|
||||||
|
transform="rotate(-43.075 369.285 154.911)"></rect>
|
||||||
|
<rect
|
||||||
|
width="28.464"
|
||||||
|
height="18.485"
|
||||||
|
x="419.57"
|
||||||
|
y="154.911"
|
||||||
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||||
|
fill="currentColor"
|
||||||
|
rx="9.242"
|
||||||
|
transform="rotate(-43.075 419.57 154.911)"></rect>
|
||||||
|
<path
|
||||||
|
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-1">
|
||||||
|
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||||
|
{sectionOne}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="mt-3 grid space-y-3">
|
||||||
|
{
|
||||||
|
product.map((item) => (
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
class="inline-flex gap-x-2 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
|
||||||
|
href={item.url}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-1">
|
||||||
|
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||||
|
{sectionTwo}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div class="mt-3 grid space-y-3">
|
||||||
|
{
|
||||||
|
company.map((item, index) => (
|
||||||
|
<p>
|
||||||
|
<a
|
||||||
|
class="inline-flex gap-x-2 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
|
||||||
|
href={item.url}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
|
</a>
|
||||||
|
{index === 2 ? (
|
||||||
|
<span class="ms-1 inline rounded-lg bg-[#e14d0b] px-2 py-1 text-xs text-neutral-50">
|
||||||
|
We're hiring
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</p>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-2">
|
||||||
|
<h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
|
||||||
|
{sectionThree}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<EmailFooterInput />
|
||||||
|
<p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
{content}
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mt-5 grid gap-y-2 sm:mt-12 sm:flex sm:items-center sm:justify-between sm:gap-y-0"
|
||||||
|
>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<p class="text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
© <span id="current-year"></span> ScrewFast. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<!-- End Col -->
|
||||||
|
|
||||||
|
<!-- Social Brands -->
|
||||||
|
<div>
|
||||||
|
<FooterSocialLink url="#"
|
||||||
|
><svg
|
||||||
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><title>Facebook</title><path
|
||||||
|
d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</FooterSocialLink>
|
||||||
|
|
||||||
|
<FooterSocialLink url="#"
|
||||||
|
><svg
|
||||||
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><title>X</title><path
|
||||||
|
d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
|
||||||
|
></path></svg
|
||||||
|
></FooterSocialLink
|
||||||
|
>
|
||||||
|
|
||||||
|
<FooterSocialLink url="https://github.com/mearashadowfax/ScrewFast"
|
||||||
|
><svg
|
||||||
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><title>GitHub</title><path
|
||||||
|
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</FooterSocialLink>
|
||||||
|
|
||||||
|
<FooterSocialLink url="#"
|
||||||
|
><svg
|
||||||
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><title>Google</title><path
|
||||||
|
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</FooterSocialLink>
|
||||||
|
|
||||||
|
<FooterSocialLink url="#"
|
||||||
|
><svg
|
||||||
|
class="h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400"
|
||||||
|
fill="currentColor"
|
||||||
|
role="img"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><title>Slack</title><path
|
||||||
|
d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</FooterSocialLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const year = new Date().getFullYear();
|
||||||
|
const element = document.getElementById("current-year");
|
||||||
|
element!.innerText = year.toString();
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
128
src/components/HeroSection2.astro
Normal file
128
src/components/HeroSection2.astro
Normal file
|
|
@ -0,0 +1,128 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import GithubBtn from "./ui/buttons/GithubBtn.astro";
|
||||||
|
|
||||||
|
// Variables for customization of the LoginModal Component
|
||||||
|
// Main heading
|
||||||
|
const title: string = "Let's Build Together";
|
||||||
|
|
||||||
|
// Sub-heading text
|
||||||
|
const subTitle: string =
|
||||||
|
"ScrewFast is an open-source template, meticulously crafted with Astro, Tailwind CSS, and Preline UI frameworks.";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="relative mx-auto max-w-[85rem] px-4 pb-24 pt-10 sm:px-6 lg:px-8">
|
||||||
|
<div class="absolute left-[10%] top-[25%] scale-90">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.5"
|
||||||
|
color="#ea580c"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="#ea580c"
|
||||||
|
stroke="#ea580c"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M12 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM3 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
stroke="#ea580c"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M21 7.353v9.294a.6.6 0 0 1-.309.525l-8.4 4.666a.6.6 0 0 1-.582 0l-8.4-4.666A.6.6 0 0 1 3 16.647V7.353a.6.6 0 0 1 .309-.524l8.4-4.667a.6.6 0 0 1 .582 0l8.4 4.667a.6.6 0 0 1 .309.524Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
stroke="#ea580c"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="m3.528 7.294 8.18 4.544a.6.6 0 0 0 .583 0l8.209-4.56M12 21v-9"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="absolute left-[85%] top-0 scale-75">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.5"
|
||||||
|
color="#fbbf24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="#fbbf24"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
fill="#fbbf24"
|
||||||
|
stroke="#fbbf24"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path>
|
||||||
|
<path
|
||||||
|
stroke="#fbbf24"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M5 10.5V9M5 15v-1.5"></path>
|
||||||
|
<path
|
||||||
|
fill="#fbbf24"
|
||||||
|
stroke="#fbbf24"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M5 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM19 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
stroke="#fbbf24"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M10.5 19H9M15 19h-1.5"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-[15%] left-[35%] scale-[.6]">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="64"
|
||||||
|
height="64"
|
||||||
|
fill="none"
|
||||||
|
stroke-width="1.5"
|
||||||
|
color="#a3a3a3"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="#a3a3a3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M5.164 17c.29-1.049.67-2.052 1.132-3M11.5 7.794A16.838 16.838 0 0 1 14 6.296M4.5 22a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
stroke="#a3a3a3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M9.5 12a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5ZM19.5 7a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto mt-5 max-w-xl text-center">
|
||||||
|
<h1
|
||||||
|
class="block text-balance text-4xl font-bold leading-tight tracking-tight text-neutral-800 dark:text-neutral-200 md:text-5xl lg:text-6xl"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mx-auto mt-5 max-w-3xl text-center">
|
||||||
|
<p class="text-lg text-neutral-600 dark:text-neutral-400">{subTitle}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 flex justify-center gap-3">
|
||||||
|
<GithubBtn url="https://github.com/mearashadowfax/ScrewFast" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
83
src/components/ui/authentication/LoginModal.astro
Normal file
83
src/components/ui/authentication/LoginModal.astro
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import GoogleBtn from "../buttons/GoogleBtn.astro";
|
||||||
|
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||||
|
import EmailInput from "./input/EmailInput.astro";
|
||||||
|
import PasswordInput from "./input/PasswordInput.astro";
|
||||||
|
import Checkbox from "./input/Checkbox.astro";
|
||||||
|
|
||||||
|
// Variables for customization of the LoginModal Component
|
||||||
|
// Modal identifier
|
||||||
|
const id = "hs-toggle-between-modals-login-modal";
|
||||||
|
|
||||||
|
// Main heading
|
||||||
|
const title: string = "Sign in";
|
||||||
|
|
||||||
|
// Sub-heading text
|
||||||
|
const subTitle: string = "Don't have an account yet?";
|
||||||
|
|
||||||
|
// Text for registration button
|
||||||
|
const registerBtn: string = "Sign up here";
|
||||||
|
|
||||||
|
// Target link for registration button
|
||||||
|
const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||||
|
>
|
||||||
|
<div class="mx-auto w-full max-w-md p-6">
|
||||||
|
<div
|
||||||
|
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<div class="p-4 sm:p-7">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1
|
||||||
|
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
{subTitle}
|
||||||
|
<button
|
||||||
|
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||||
|
data-hs-overlay={registerBtnDataHS}
|
||||||
|
>
|
||||||
|
{registerBtn}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-5">
|
||||||
|
<GoogleBtn title="Sign in with Google" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
|
||||||
|
>
|
||||||
|
Or
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<div class="grid gap-y-4">
|
||||||
|
<EmailInput />
|
||||||
|
|
||||||
|
<PasswordInput
|
||||||
|
forgot={true}
|
||||||
|
id="password-error"
|
||||||
|
content="8+ characters required"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Checkbox id="remember-me" />
|
||||||
|
|
||||||
|
<AuthBtn title="Sign in" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
64
src/components/ui/authentication/RecoverModal.astro
Normal file
64
src/components/ui/authentication/RecoverModal.astro
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||||
|
import EmailInput from "./input/EmailInput.astro";
|
||||||
|
|
||||||
|
// Variables to customize the RecoverModal Component
|
||||||
|
|
||||||
|
// Modal identifier
|
||||||
|
const id = "hs-toggle-between-modals-recover-modal";
|
||||||
|
|
||||||
|
// Main heading
|
||||||
|
const title: string = "Forgot password?";
|
||||||
|
|
||||||
|
// Sub-heading text
|
||||||
|
const subTitle: string = "Remember your password?";
|
||||||
|
|
||||||
|
// Text and target link for the login button
|
||||||
|
const loginBtn: string = "Sign in here";
|
||||||
|
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||||
|
>
|
||||||
|
<div class="mx-auto w-full max-w-md p-6">
|
||||||
|
<div
|
||||||
|
class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<div class="p-4 sm:p-7">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1
|
||||||
|
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
{subTitle}
|
||||||
|
<button
|
||||||
|
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||||
|
data-hs-overlay={loginBtnDataHS}
|
||||||
|
>
|
||||||
|
{loginBtn}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<!-- Form -->
|
||||||
|
<form>
|
||||||
|
<div class="grid gap-y-4">
|
||||||
|
<EmailInput />
|
||||||
|
<AuthBtn title="Reset password" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
92
src/components/ui/authentication/RegisterModal.astro
Normal file
92
src/components/ui/authentication/RegisterModal.astro
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
---
|
||||||
|
// Import the necessary dependencies from individual component files
|
||||||
|
import GoogleBtn from "../buttons/GoogleBtn.astro";
|
||||||
|
import AuthBtn from "../buttons/AuthBtn.astro";
|
||||||
|
import EmailInput from "./input/EmailInput.astro";
|
||||||
|
import PasswordInput from "./input/PasswordInput.astro";
|
||||||
|
import Checkbox from "./input/Checkbox.astro";
|
||||||
|
|
||||||
|
// Variables to customize the RegisterModal Component
|
||||||
|
|
||||||
|
// Modal identifier
|
||||||
|
const id = "hs-toggle-between-modals-register-modal";
|
||||||
|
|
||||||
|
// Main title
|
||||||
|
const title: string = "Sign up";
|
||||||
|
|
||||||
|
// Subtitle text
|
||||||
|
const subTitle: string = "Already have an account?";
|
||||||
|
|
||||||
|
// Text and target link for the login button
|
||||||
|
const loginBtn: string = "Sign in here";
|
||||||
|
const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
id={id}
|
||||||
|
class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
|
||||||
|
>
|
||||||
|
<div class="mx-auto w-full max-w-md p-6">
|
||||||
|
<div
|
||||||
|
class="mt-7 max-h-full overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
|
||||||
|
>
|
||||||
|
<div class="p-4 sm:p-7">
|
||||||
|
<div class="text-center">
|
||||||
|
<h1
|
||||||
|
class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
||||||
|
{subTitle}
|
||||||
|
<button
|
||||||
|
class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
|
||||||
|
data-hs-overlay={loginBtnDataHS}
|
||||||
|
>
|
||||||
|
{loginBtn}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5">
|
||||||
|
<GoogleBtn title="Sign up with Google" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
|
||||||
|
>
|
||||||
|
Or
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<div class="grid gap-y-4">
|
||||||
|
<EmailInput />
|
||||||
|
<PasswordInput
|
||||||
|
id="password-error"
|
||||||
|
content="8+ characters required"
|
||||||
|
/>
|
||||||
|
<PasswordInput
|
||||||
|
label="Confirm Password"
|
||||||
|
id="confirm-password-error"
|
||||||
|
aria="confirm-password-error"
|
||||||
|
content="Password does not match the password"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Checkbox label="I accept the " , id="terms-agree">
|
||||||
|
<a
|
||||||
|
class="font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none"
|
||||||
|
href="#">Terms and Conditions</a
|
||||||
|
>
|
||||||
|
</Checkbox>
|
||||||
|
|
||||||
|
<AuthBtn title="Sign up" />
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
16
src/components/ui/authentication/input/Checkbox.astro
Normal file
16
src/components/ui/authentication/input/Checkbox.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
---
|
||||||
|
const { label = "Remember me", id } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex">
|
||||||
|
<input id={id} name="remember-me" type="checkbox" class="shrink-0 mt-0.5 border-neutral-200 rounded text-neutral-600 pointer-events-none focus:ring-yellow-400 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-yellow-400 dark:checked:border-yellow-400 dark:focus:ring-offset-neutral-800">
|
||||||
|
</div>
|
||||||
|
<div class="ms-3">
|
||||||
|
<label for={id} class="text-sm text-neutral-800 dark:text-neutral-200">{label} <slot /> </label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
const { label = "Search", title = "Subscribe" } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="mt-4 flex flex-col items-center gap-2 rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800 sm:flex-row sm:gap-3"
|
||||||
|
>
|
||||||
|
<div class="w-full">
|
||||||
|
<label for="hero-input" class="sr-only">{label}</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="hero-input"
|
||||||
|
name="hero-input"
|
||||||
|
class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-[#fa5a15] focus:ring-[#fa5a15] disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300"
|
||||||
|
placeholder="Enter your email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-[#fa5a15] p-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
42
src/components/ui/authentication/input/EmailInput.astro
Normal file
42
src/components/ui/authentication/input/EmailInput.astro
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
const { label = "Email address" } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
|
||||||
|
>{label}</label
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
|
||||||
|
required
|
||||||
|
aria-describedby="email-error"
|
||||||
|
/>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-red-500"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2 hidden text-xs text-red-600" id="email-error">
|
||||||
|
Please include a valid email address so we can get back to you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
66
src/components/ui/authentication/input/PasswordInput.astro
Normal file
66
src/components/ui/authentication/input/PasswordInput.astro
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
---
|
||||||
|
const {
|
||||||
|
label = "Password",
|
||||||
|
forgot,
|
||||||
|
id,
|
||||||
|
content,
|
||||||
|
aria = "password-error",
|
||||||
|
} = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string;
|
||||||
|
forgot?: boolean;
|
||||||
|
id?: string;
|
||||||
|
content?: string;
|
||||||
|
aria?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
|
||||||
|
>{label}</label
|
||||||
|
>
|
||||||
|
{
|
||||||
|
forgot ? (
|
||||||
|
<button
|
||||||
|
class="text-sm font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none dark:focus:ring-1 focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200"
|
||||||
|
data-hs-overlay="#hs-toggle-between-modals-recover-modal"
|
||||||
|
>
|
||||||
|
Forgot password?
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="relative">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="password"
|
||||||
|
name="password"
|
||||||
|
class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
|
||||||
|
required
|
||||||
|
aria-describedby={aria}
|
||||||
|
/>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 text-red-500"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="mt-2 hidden text-xs text-red-600" id={id}>
|
||||||
|
{content}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
13
src/components/ui/buttons/AuthBtn.astro
Normal file
13
src/components/ui/buttons/AuthBtn.astro
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
const { title } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-semibold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
|
||||||
|
>{title}</button
|
||||||
|
>
|
||||||
28
src/components/ui/buttons/GithubBtn.astro
Normal file
28
src/components/ui/buttons/GithubBtn.astro
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
---
|
||||||
|
const { title = "Continue with Github", url } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
url?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="group inline-flex items-center justify-center gap-x-3 rounded-full border border-transparent bg-yellow-400 px-4 py-3 text-center text-sm font-medium text-neutral-700 outline-none ring-zinc-500 transition duration-300 hover:shadow-2xl hover:shadow-yellow-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
{title}
|
||||||
|
</a>
|
||||||
34
src/components/ui/buttons/GoogleBtn.astro
Normal file
34
src/components/ui/buttons/GoogleBtn.astro
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
---
|
||||||
|
const { title } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm font-medium text-neutral-600 shadow-sm transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-900 focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-auto w-4"
|
||||||
|
width="46"
|
||||||
|
height="47"
|
||||||
|
viewBox="0 0 46 47"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M46 24.0287C46 22.09 45.8533 20.68 45.5013 19.2112H23.4694V27.9356H36.4069C36.1429 30.1094 34.7347 33.37 31.5957 35.5731L31.5663 35.8669L38.5191 41.2719L38.9885 41.3306C43.4477 37.2181 46 31.1669 46 24.0287Z"
|
||||||
|
fill="#4285F4"></path>
|
||||||
|
<path
|
||||||
|
d="M23.4694 47C29.8061 47 35.1161 44.9144 39.0179 41.3012L31.625 35.5437C29.6301 36.9244 26.9898 37.8937 23.4987 37.8937C17.2793 37.8937 12.0281 33.7812 10.1505 28.1412L9.88649 28.1706L2.61097 33.7812L2.52296 34.0456C6.36608 41.7125 14.287 47 23.4694 47Z"
|
||||||
|
fill="#34A853"></path>
|
||||||
|
<path
|
||||||
|
d="M10.1212 28.1413C9.62245 26.6725 9.32908 25.1156 9.32908 23.5C9.32908 21.8844 9.62245 20.3275 10.0918 18.8588V18.5356L2.75765 12.8369L2.52296 12.9544C0.909439 16.1269 0 19.7106 0 23.5C0 27.2894 0.909439 30.8731 2.49362 34.0456L10.1212 28.1413Z"
|
||||||
|
fill="#FBBC05"></path>
|
||||||
|
<path
|
||||||
|
d="M23.4694 9.07688C27.8699 9.07688 30.8622 10.9863 32.5344 12.5725L39.1645 6.11C35.0867 2.32063 29.8061 0 23.4694 0C14.287 0 6.36607 5.2875 2.49362 12.9544L10.0918 18.8588C11.9987 13.1894 17.25 9.07688 23.4694 9.07688Z"
|
||||||
|
fill="#EB4335"></path>
|
||||||
|
</svg>
|
||||||
|
{title}
|
||||||
|
</button>
|
||||||
29
src/components/ui/buttons/LoginBtn.astro
Normal file
29
src/components/ui/buttons/LoginBtn.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
const { title = "Log in" } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title?: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center gap-x-2 font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
|
||||||
|
data-hs-overlay="#hs-toggle-between-modals-login-modal"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-4 w-4 flex-shrink-0"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
{title}
|
||||||
|
</button>
|
||||||
0
src/components/ui/links/FooterLink.astro
Normal file
0
src/components/ui/links/FooterLink.astro
Normal file
15
src/components/ui/links/FooterSocialLink.astro
Normal file
15
src/components/ui/links/FooterSocialLink.astro
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
const { url } = Astro.props;
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-semibold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
|
||||||
|
href={url}
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</a>
|
||||||
Loading…
Add table
Reference in a new issue