mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 04:19:32 +00:00
docs: add basic remix documentation (#38)
This commit is contained in:
Erik
@@ -1,14 +1,14 @@
|
||||
"use client";
|
||||
import {
|
||||
CheckIcon,
|
||||
Globe2Icon,
|
||||
PlugIcon,
|
||||
PlugZap2Icon,
|
||||
Plus,
|
||||
RabbitIcon,
|
||||
ShieldCheckIcon,
|
||||
Webhook,
|
||||
XIcon,
|
||||
CheckIcon,
|
||||
Globe2Icon,
|
||||
PlugIcon,
|
||||
PlugZap2Icon,
|
||||
Plus,
|
||||
RabbitIcon,
|
||||
ShieldCheckIcon,
|
||||
Webhook,
|
||||
XIcon,
|
||||
} from "lucide-react";
|
||||
import { GitHubLogoIcon, LockClosedIcon } from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
@@ -19,188 +19,188 @@ import { Ripple } from "./ripple";
|
||||
import { GithubStat } from "./github-stat";
|
||||
|
||||
export default function Features({ stars }: { stars: string | null }) {
|
||||
return (
|
||||
<div className="md:w-10/12 overflow-hidden mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2">
|
||||
<Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 md:mx-0 grid-rows-4 md:grid-rows-4 w-full">
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
return (
|
||||
<div className="md:w-10/12 overflow-hidden mt-10 mx-auto font-geist relative md:border-l-0 md:border-[1.2px] rounded-none -pr-2">
|
||||
<Plus className="absolute top-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 md:mx-0 grid-rows-4 md:grid-rows-4 w-full">
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10 overflow-clip">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<PlugZap2Icon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Framework Agnostic{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Supports popular <strong>frameworks</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Supports your favorite frontend, backend and meta frameworks,
|
||||
including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js,
|
||||
Hono, and more{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<PlugZap2Icon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Framework Agnostic{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-xl md:text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Supports popular <strong>frameworks</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Supports your favorite frontend, backend and meta frameworks,
|
||||
including React, Vue, Svelte, Astro, Solid, Next.js, Nuxt.js,
|
||||
Hono, and more{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start border-l-[1.2px] border-t-[1.2px] md:border-t-0 transform-gpu flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<LockClosedIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Authentication</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Email & Password <strong>Authentication</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Builtin support for email and password authentication, with secure
|
||||
password hashing and account management features{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<LockClosedIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Authentication</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Email & Password <strong>Authentication</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Builtin support for email and password authentication, with secure
|
||||
password hashing and account management features{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative items-start justify-start md:border-l-[0.2px] border-t-[1.2px] md:border-t-0 flex flex-col p-10">
|
||||
<Plus className="absolute bottom-[-17px] left-[-17px] text-black/20 dark:text-white/30 w-8 h-8" />
|
||||
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<Webhook className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Social Sign-on</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Support multiple <strong>OAuth providers.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Allow users to sign in with their accounts, including Github,
|
||||
Google, Discord, Twitter, and more.{" "}
|
||||
<a className="text-gray-50" href="#" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<ShieldCheckIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Two Factor</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Two Factor <strong>Authentication</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
With our built-in two factor authentication plugin, you can add an
|
||||
extra layer of security to your account.{" "}
|
||||
<Link className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<RabbitIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Organization & Access Control{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Gain and manage <strong>access.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Manage users and their access to resources within your
|
||||
application.{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] transform-gpu relative flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<PlugIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Plugin Ecosystem{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Pluggable with <strong>custom.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Enhance your application with our official plugins and those
|
||||
created by the community.{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 ">
|
||||
<div className="p-16 pt-10 md:px-10 h-full md:absolute top-0 left-0 w-full">
|
||||
<div className="flex flex-col gap-3 justify-center h-full items-center w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Globe2Icon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Own your auth
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
|
||||
<strong>Roll your own auth with confidence in minutes!</strong>
|
||||
</p>
|
||||
<div className="flex mt-[10px] z-20 justify-center items-start">
|
||||
<TechStackDisplay
|
||||
skills={[
|
||||
"nextJs",
|
||||
"nuxt",
|
||||
"svelteKit",
|
||||
"astro",
|
||||
"solidStart",
|
||||
"react",
|
||||
"hono",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubStat stars={stars} />
|
||||
</div>
|
||||
<Ripple />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<Webhook className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Social Sign-on</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Support multiple <strong>OAuth providers.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Allow users to sign in with their accounts, including Github,
|
||||
Google, Discord, Twitter, and more.{" "}
|
||||
<a className="text-gray-50" href="#" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<ShieldCheckIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">Two Factor</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Two Factor <strong>Authentication</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
With our built-in two factor authentication plugin, you can add an
|
||||
extra layer of security to your account.{" "}
|
||||
<Link className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-staart border-l-[1.2px] border-t-[1.2px] flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<RabbitIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Organization & Access Control{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Gain and manage <strong>access.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Manage users and their access to resources within your
|
||||
application.{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-start justify-start border-l-[1.2px] border-t-[1.2px] transform-gpu relative flex flex-col p-10 ">
|
||||
<div className="flex gap-2 items-center my-1">
|
||||
<PlugIcon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Plugin Ecosystem{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-w-full">
|
||||
<div className="flex gap-3 ">
|
||||
<p className="text-2xl tracking-tighter font-normal max-w-lg">
|
||||
Pluggable with <strong>custom.</strong>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<p className="text-left text-sm mt-2 text-muted-foreground">
|
||||
Enhance your application with our official plugins and those
|
||||
created by the community.{" "}
|
||||
<a className="text-gray-50" href="/docs" target="_blank">
|
||||
Learn more
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative md:grid md:col-span-3 grid-cols-2 row-span-2 border-t-[1.2px] border-l-[1.2px] md:border-b-[1.2px] dark:border-b-0 h-full py-20 ">
|
||||
<div className="p-16 pt-10 md:px-10 h-full md:absolute top-0 left-0 w-full">
|
||||
<div className="flex flex-col gap-3 justify-center h-full items-center w-full">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Globe2Icon className="w-4 h-4" />
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
Own your auth
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-4xl md:text-4xl mt-4 tracking-tighter font-normal max-w-md mx-auto text-center">
|
||||
<strong>Roll your own auth with confidence in minutes!</strong>
|
||||
</p>
|
||||
<div className="flex mt-[10px] z-20 justify-center items-start">
|
||||
<TechStackDisplay
|
||||
skills={[
|
||||
"nextJs",
|
||||
"nuxt",
|
||||
"svelteKit",
|
||||
"astro",
|
||||
"solidStart",
|
||||
"react",
|
||||
"hono",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<GithubStat stars={stars} />
|
||||
</div>
|
||||
<Ripple />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
export function GithubStat({ stars }: { stars: string | null }) {
|
||||
return (
|
||||
<a
|
||||
href="https://github.com/better-auth/better-auth"
|
||||
className="flex mt-4 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground rounded-none h-10 p-5 ml-auto z-50 overflow-hidden items-center text-sm font-medium focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 bg-transprent text-white px-4 py-2 max-w-52 whitespace-pre md:flex group relative w-full justify-center gap-2 transition-all duration-300 ease-out hover:ring-black "
|
||||
>
|
||||
<span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white/60 opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current" viewBox="0 0 438.549 438.549">
|
||||
<path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
|
||||
</svg>
|
||||
<span className="ml-2 text-white">Star on GitHub</span>
|
||||
</div>
|
||||
<div className="ml-2 flex items-center gap-1 text-sm md:flex">
|
||||
<svg
|
||||
className="w-4 h-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="inline-block tabular-nums tracking-wider font-display font-medium text-white">
|
||||
{stars}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
return (
|
||||
<a
|
||||
href="https://github.com/better-auth/better-auth"
|
||||
className="flex mt-4 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground rounded-none h-10 p-5 ml-auto z-50 overflow-hidden items-center text-sm font-medium focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 bg-transprent text-white px-4 py-2 max-w-52 whitespace-pre md:flex group relative w-full justify-center gap-2 transition-all duration-300 ease-out hover:ring-black "
|
||||
>
|
||||
<span className="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white/60 opacity-10 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
|
||||
<div className="flex items-center">
|
||||
<svg className="w-4 h-4 fill-current" viewBox="0 0 438.549 438.549">
|
||||
<path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
|
||||
</svg>
|
||||
<span className="ml-2 text-white">Star on GitHub</span>
|
||||
</div>
|
||||
<div className="ml-2 flex items-center gap-1 text-sm md:flex">
|
||||
<svg
|
||||
className="w-4 h-4 text-gray-500 transition-all duration-300 group-hover:text-yellow-300"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"
|
||||
fill-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
<span className="inline-block tabular-nums tracking-wider font-display font-medium text-white">
|
||||
{stars}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -186,4 +186,29 @@ export const Icons = {
|
||||
></path>
|
||||
</svg>
|
||||
),
|
||||
remix: () => (
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 412 474"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M393.946 364.768C398.201 419.418 398.201 445.036 398.201 473H271.756C271.756 466.909 271.865 461.337 271.975 455.687C272.317 438.123 272.674 419.807 269.828 382.819C266.067 328.667 242.748 316.634 199.871 316.634H161.883H1V218.109H205.889C260.049 218.109 287.13 201.633 287.13 158.011C287.13 119.654 260.049 96.4098 205.889 96.4098H1V0H228.456C351.069 0 412 57.9117 412 150.42C412 219.613 369.123 264.739 311.201 272.26C360.096 282.037 388.681 309.865 393.946 364.768Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1 473V399.553H134.697C157.029 399.553 161.878 416.116 161.878 425.994V473H1Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M1 399.053H0.5V399.553V473V473.5H1H161.878H162.378V473V425.994C162.378 420.988 161.152 414.26 157.063 408.77C152.955 403.255 146.004 399.053 134.697 399.053H1Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.8"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
};
|
||||
|
||||
@@ -501,6 +501,11 @@ export const contents: Content[] = [
|
||||
href: "/docs/integrations/astro",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Remix",
|
||||
icon: Icons.remix,
|
||||
href: "/docs/integrations/remix",
|
||||
},
|
||||
{
|
||||
title: "Next",
|
||||
icon: Icons.nextJS,
|
||||
|
||||
Reference in New Issue
Block a user