-
Notifications
You must be signed in to change notification settings - Fork 341
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
320 additions
and
73 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { notFound } from "next/navigation"; | ||
| import Link from "next/link"; | ||
| import { blog, BlogPage } from "@/app/source"; | ||
| import { buttonVariants } from "@/components/ui/button"; | ||
| import Image from "next/image"; | ||
|
|
||
| import profilePic from "../../../../components/testimonials/profiles/Mc0m3zkD_400x400.jpg"; | ||
|
|
||
| interface Param { | ||
| slug: string; | ||
| } | ||
|
|
||
| export default function Page({ | ||
| params, | ||
| }: { | ||
| params: Param; | ||
| }): React.ReactElement { | ||
| const page = blog.getPage([params.slug]) as BlogPage; | ||
|
|
||
| if (!page) notFound(); | ||
|
|
||
| const MDX = (page.data as any).exports.default; | ||
|
|
||
| return ( | ||
| <main className="px-4"> | ||
| <div className="mx-auto flex w-full max-w-screen-xl items-center justify-between py-4"> | ||
| <Link | ||
| href="/blog" | ||
| className={buttonVariants({ size: "sm", variant: "ghost" })} | ||
| > | ||
| Back | ||
| </Link> | ||
| <p className="text-xs text-gray-500"> | ||
| {(page.data.date as Date).toLocaleString("en-US", { | ||
| year: "numeric", | ||
| month: "2-digit", | ||
| day: "2-digit", | ||
| })} | ||
| </p> | ||
| </div> | ||
| <div | ||
| className="mx-auto w-full max-w-screen-xl rounded-xl border py-12 md:px-8" | ||
| style={{ | ||
| backgroundColor: "black", | ||
| backgroundImage: [ | ||
| "linear-gradient(140deg, hsla(274,94%,54%,0.3), transparent 50%)", | ||
| "linear-gradient(to left top, hsla(260,90%,50%,0.8), transparent 50%)", | ||
| "radial-gradient(circle at 100% 100%, hsla(240,100%,82%,1), hsla(240,40%,40%,1) 17%, hsla(240,40%,40%,0.5) 20%, transparent)", | ||
| ].join(", "), | ||
| backgroundBlendMode: "difference, difference, normal", | ||
| }} | ||
| > | ||
| <div className="mx-auto flex w-full max-w-screen-sm flex-col items-center justify-center px-4"> | ||
| <h1 className="text-center text-4xl font-bold text-white"> | ||
| {page.data.title} | ||
| </h1> | ||
| <p className="mt-4 text-balance text-center text-lg text-white/80"> | ||
| {page.data.description} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <article className="prose lg:prose-lg mx-auto w-full max-w-screen-sm py-8"> | ||
| <MDX /> | ||
| </article> | ||
| <div className="mx-auto mb-20 flex w-full max-w-screen-sm items-start gap-3"> | ||
| <Image | ||
| src={profilePic} | ||
| alt="Simon Farshid" | ||
| width={32} | ||
| height={32} | ||
| className="size-8 rounded-full" | ||
| /> | ||
| <div className="mt-1.5 flex flex-col"> | ||
| <span className="text-sm font-medium">Simon Farshid</span> | ||
| </div> | ||
| </div> | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| export function generateStaticParams(): Param[] { | ||
| return blog.getPages().map((page) => ({ | ||
| slug: page.slugs[0]!, | ||
| })); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import Link from "next/link"; | ||
| import { blog, BlogPage } from "@/app/source"; | ||
|
|
||
| export default function Page(): React.ReactElement { | ||
| const posts = [...blog.getPages()].sort( | ||
| (a: BlogPage, b: BlogPage) => | ||
| new Date(b.data.date ?? b.file.name).getTime() - | ||
| new Date(a.data.date ?? a.file.name).getTime(), | ||
| ); | ||
|
|
||
| return ( | ||
| <main className="mx-auto w-full max-w-screen-sm p-4 py-12"> | ||
| <h1 className="mb-4 px-4 pb-2 text-4xl font-bold">assistant-ui Blog</h1> | ||
| <div className="flex flex-col"> | ||
| {posts.map((post: BlogPage) => ( | ||
| <Link | ||
| key={post.url} | ||
| href={post.url} | ||
| className="bg-card hover:bg-accent hover:text-accent-foreground flex flex-col rounded-lg p-4 transition-colors" | ||
| > | ||
| <p className="font-medium">{post.data.title}</p> | ||
| <p className="text-muted-foreground mt-auto pt-2 text-xs"> | ||
| {new Date(post.data.date ?? post.file.name).toDateString()} | ||
| </p> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| </main> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
apps/docs/components/testimonials/TestimonialContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| "use client"; | ||
|
|
||
| import { Testimonial } from "@/components/testimonials/testimonials"; | ||
| import { cn } from "@/lib/utils"; | ||
| import Image from "next/image"; | ||
| import { FC } from "react"; | ||
|
|
||
| export const TestimonialContainer: FC<{ | ||
| testimonials: Testimonial[]; | ||
| className?: string; | ||
| }> = ({ testimonials, className }) => { | ||
| return ( | ||
| <div className={cn("relative columns-1 gap-4 overflow-hidden", className)}> | ||
| {testimonials.map((testimonial, idx) => ( | ||
| <TestimonialView key={idx} {...testimonial} /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
| const TestimonialView: FC<Testimonial> = (testimonial) => { | ||
| return ( | ||
| <div className="mb-4 break-inside-avoid-column"> | ||
| <a target="_blank" href={testimonial.url}> | ||
| <div className="bg-card hover:bg-border flex flex-col gap-3 rounded-lg border p-6 shadow transition-colors"> | ||
| <div className="relative flex items-center gap-2"> | ||
| <Image | ||
| alt={"@" + testimonial.username + "'s twitter image"} | ||
| loading="lazy" | ||
| width="64" | ||
| height="64" | ||
| className="h-10 w-10 rounded-full border" | ||
| src={testimonial.avatar} | ||
| /> | ||
| <p className="text-sm font-medium">{testimonial.username}</p> | ||
| <div className="bg-background absolute -left-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full"> | ||
| <XLogo /> | ||
| </div> | ||
| </div> | ||
| <p className="text-muted-foreground whitespace-pre-line"> | ||
| {testimonial.message} | ||
| </p> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| ); | ||
| }; | ||
| const XLogo: FC = () => { | ||
| return ( | ||
| <svg | ||
| className="h-[12px] w-[12px]" | ||
| fill="currentColor" | ||
| viewBox="0 0 24 24" | ||
| aria-hidden="true" | ||
| > | ||
| <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path> | ||
| </svg> | ||
| ); | ||
| }; |
Oops, something went wrong.