mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-07 04:19:22 +00:00
332 lines
10 KiB
TypeScript
332 lines
10 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Icons } from "../icons";
|
|
import Link from "next/link";
|
|
import { noSSR } from "foxact/no-ssr";
|
|
import { Suspense } from "react";
|
|
|
|
const testimonials = [
|
|
{
|
|
name: "Dev Ed",
|
|
profession: "Content Creator",
|
|
link: "https://x.com/edgarasben/status/1856336936505590160",
|
|
description:
|
|
"This has been the best auth experience by a mileee, auto generated my drizzle schemas for users, sessions etc, full type safe and dead simple api, well done @better_auth 👏👏",
|
|
avatar: "/people-say/dev-ed.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Lazar Nikolov",
|
|
profession: "Software Engineer & Educator",
|
|
link: "https://x.com/NikolovLazar/status/1888992999872331985",
|
|
description:
|
|
"I didn't know @better_auth was THAT good. I'm implementing it in TanStack Start and I can't believe how good the DX is. This is my favorite stack now (along with @DrizzleORM and @shadcn ui).",
|
|
avatar: "/people-say/lazar-nikolov.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Theo - t3.gg",
|
|
profession: "CEO of t3.chat",
|
|
link: "https://x.com/theo/status/1879769267866120341",
|
|
description: "Very exciting project and a super easy rec",
|
|
avatar: "/people-say/theo.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "kitze",
|
|
profession: "http://sizzy.co",
|
|
link: "https://x.com/thekitze/status/1911524156115476831",
|
|
description:
|
|
"I rarely stumble upon a framework/library that makes me rethink things. @better_auth is a rare exception. it literally delayed @zerotoshipped for a week...",
|
|
avatar: "/people-say/kitze.jpg",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Sébastien Chopin",
|
|
profession: "Creator of Nuxt & NuxtLabs",
|
|
link: "https://x.com/Atinux/status/1853751424561336322",
|
|
description:
|
|
"When @better_auth meets @nuxt_hub to build full-stack Nuxt apps on Cloudflare (using D1 & KV).",
|
|
avatar: "/people-say/sebastien-chopin.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
|
|
{
|
|
name: "Dax",
|
|
profession: "Creator of SST",
|
|
link: "https://x.com/thdxr/status/1866222656468705426",
|
|
description:
|
|
"between better-auth and openauth one of those options should cover how you want to do things for 95% of cases. the problem of defaulting to SaaS for auth in js is finally fixed...",
|
|
avatar: "/people-say/dax.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "SaltyAtom",
|
|
profession: "Creator of ElysiaJS",
|
|
link: "https://x.com/saltyAom/status/1916919136565051491",
|
|
description: `Strategies to win at Auth:
|
|
1. Copy Better Auth -
|
|
2. Go back to 1`,
|
|
avatar: "/people-say/saltyatom.jpg",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Josh Tried Coding",
|
|
profession: "devrel @upstash",
|
|
description: `using better-auth for the first time
|
|
|
|
holy sh** is it good, works so nice with typescript + drizzle`,
|
|
avatar: "/people-say/josh-tried-coding.jpg",
|
|
image: "",
|
|
link: "https://x.com/joshtriedcoding/status/1916108678672900301",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Xavier Pladevall",
|
|
profession: "Founder of IndexBI",
|
|
description: `We've been using @better_auth in prod @IndexBI and absolutely love it. Super comprehensive from day one.👏`,
|
|
avatar: "/people-say/xavier-pladevall.jpg",
|
|
image: "",
|
|
link: "https://x.com/xavierpladevall/status/1915490484891341211",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Code with Antonio",
|
|
profession: "Content Creator",
|
|
description: `i swear @polar_sh and @better_auth developer experience should be mandatory teaching for all CS students`,
|
|
link: "https://x.com/YTCodeAntonio/status/1920214390680236396",
|
|
avatar: "/people-say/code-with-antonio.jpg",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Ryan Vogel",
|
|
profession: "Founder of exon",
|
|
description:
|
|
"i have been using better-auth for exon todo and it is like so fast, I set it up once and it just works",
|
|
link: "https://x.com/ryandavogel/status/1914789770451964150",
|
|
avatar: "/people-say/ryan-vogel.jpg",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Dagmawi Babi",
|
|
profession: "Developer",
|
|
link: "https://x.com/DagmawiBabi/status/1845966382703280458",
|
|
description:
|
|
"@better_auth exceeded all expectations, and it's just getting started",
|
|
avatar: "/people-say/dagmawi-babi.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Tech Nerd",
|
|
profession: "Developer",
|
|
link: "https://x.com/TechNerd556/status/1863523931614822784",
|
|
description:
|
|
"Using @better_auth with custom components feels like having someone hand you the remote while you're comfortably on the sofa. The ease I'm feeling rn is insane Auth done in under 5 minutes 🤌⚡️.",
|
|
avatar: "/people-say/tech-nerd.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Omar McAdam",
|
|
profession: "Creator of AugmentedHQ",
|
|
link: "https://x.com/McPizza0/status/1879526862046839249",
|
|
description:
|
|
"if you're building a code project in 2025 use @better_auth. It has everything you need now and everything you'll need at scale. dont take this suggestion lightly..",
|
|
avatar: "/people-say/omar-mcadam.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Guillermo Rauch",
|
|
profession: "CEO of Vercel",
|
|
link: "https://x.com/rauchg/status/1871628287962906846",
|
|
description: "Great project & maintainer",
|
|
avatar: "/people-say/guillermo-rauch.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "Nizzy",
|
|
profession: "Co-founder of Zero",
|
|
link: "https://x.com/NizzyABI/status/1889178812459422162",
|
|
description:
|
|
"i cant believe how easy @better_auth is compared to @authjs all i had to do was connect it to my drizzle schema and create a sign up page w the auth :)))",
|
|
avatar: "/people-say/nizzy.png",
|
|
image: "",
|
|
social: <Icons.x />,
|
|
},
|
|
|
|
{
|
|
name: "Vybhav Bhargav",
|
|
profession: "Founding engineer @glyfspace",
|
|
link: "https://x.com/vybhavab/status/1891589126513684669",
|
|
description: "better-auth is a work of art.",
|
|
avatar: "/people-say/vybhav-bhargav.png",
|
|
social: <Icons.x />,
|
|
},
|
|
{
|
|
name: "EGOIST",
|
|
profession: "Creator of tsup, ChatWise",
|
|
link: "https://x.com/localhost_5173/status/1951152679461278068",
|
|
description: "better-auth is great, I use it everywhere",
|
|
avatar: "/people-say/egoist.png",
|
|
social: <Icons.x />,
|
|
},
|
|
];
|
|
|
|
type TestimonialProps = (typeof testimonials)[number];
|
|
|
|
const TestimonialItem = ({
|
|
reverse = false,
|
|
testimonials,
|
|
noSsr,
|
|
}: {
|
|
reverse?: boolean;
|
|
testimonials: TestimonialProps[];
|
|
noSsr?: boolean;
|
|
}) => {
|
|
noSsr && noSSR();
|
|
const animeSeconds = testimonials.length * 10;
|
|
return (
|
|
<div className="max-w-full mx-auto">
|
|
<div
|
|
className={`[--anime-duration:${animeSeconds}s] px-10 mx-auto w-full`}
|
|
>
|
|
<div
|
|
style={{
|
|
animationDuration: `${animeSeconds}s`,
|
|
}}
|
|
className={cn(
|
|
"scroller flex flex-nowrap w-max min-w-full duration-[1000s] hover:[animation-play-state:paused] overflow-hidden relative gap-5 justify-around shrink-0",
|
|
reverse ? "animate-hrtl-scroll-reverse " : "animate-hrtl-scroll",
|
|
)}
|
|
>
|
|
{testimonials.map((testimonial, indx) => {
|
|
return (
|
|
<div
|
|
key={indx}
|
|
className={cn(
|
|
"flex flex-col justify-between h-[220px] rounded-none border-[1.2px] border-black/20 shrink-0 grow-0 w-[450px] dark:border-white/10",
|
|
)}
|
|
>
|
|
<p className="px-5 py-5 tracking-tight text-md font-extralight sm:text-xl md:text-lg text-pretty text-text-primary dark:text-dark-text-primary">
|
|
"{testimonial.description}."
|
|
</p>
|
|
<div className="flex overflow-hidden h-[28%] gap-1 w-full border-t-[1.2px]">
|
|
<div className="flex items-center w-3/4 gap-3 px-4 py-3">
|
|
<img
|
|
src={testimonial.avatar}
|
|
className="w-10 h-10 rounded-full"
|
|
alt="avatar"
|
|
/>
|
|
<div className="flex flex-col items-start justify-start flex-1 gap-0">
|
|
<h5 className="text-base font-medium md:text-md">
|
|
{testimonial.name}
|
|
</h5>
|
|
<p className="text-sm md:text-base text-black/30 mt-[-4px] text-text-tertiary dark:text-white/50 dark:text-dark-text-tertiary">
|
|
{testimonial.profession}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="w-[1px] bg-black/20 dark:bg-white/20" />
|
|
<div className="flex items-center justify-center max-w-full mx-auto">
|
|
<Link href={testimonial.link} target="_blank">
|
|
{testimonial.social}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Testimonial = () => {
|
|
return (
|
|
<div className="max-w-full py-5 mx-auto overflow-hidden">
|
|
<div className="flex flex-col gap-3">
|
|
<div
|
|
style={{
|
|
maskImage:
|
|
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
|
|
}}
|
|
className="relative flex justify-around gap-5 overflow-hidden shrink-0"
|
|
>
|
|
<Suspense
|
|
fallback={
|
|
<TestimonialItem
|
|
testimonials={Array(15)
|
|
.fill(
|
|
testimonials.slice(
|
|
Math.floor(testimonials.length / 2) + 1,
|
|
testimonials.length - 1,
|
|
),
|
|
)
|
|
.flat()}
|
|
/>
|
|
}
|
|
>
|
|
<TestimonialItem
|
|
noSsr
|
|
reverse
|
|
testimonials={Array(15)
|
|
.sort(() => Math.random() - 0.5)
|
|
.fill(
|
|
testimonials.slice(0, Math.floor(testimonials.length / 2)),
|
|
)
|
|
.flat()}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
<div
|
|
style={{
|
|
maskImage:
|
|
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
|
|
}}
|
|
className="relative flex justify-around gap-5 overflow-hidden shrink-0"
|
|
>
|
|
<Suspense
|
|
fallback={
|
|
<TestimonialItem
|
|
testimonials={Array(15)
|
|
.fill(
|
|
testimonials.slice(
|
|
Math.floor(testimonials.length / 2) + 1,
|
|
testimonials.length - 1,
|
|
),
|
|
)
|
|
.flat()}
|
|
/>
|
|
}
|
|
>
|
|
<TestimonialItem
|
|
noSsr
|
|
testimonials={Array(15)
|
|
.sort(() => Math.random() - 0.5)
|
|
.fill(
|
|
testimonials.slice(
|
|
Math.floor(testimonials.length / 2) + 1,
|
|
testimonials.length - 1,
|
|
),
|
|
)
|
|
.flat()}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|