1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
"use client";
import Image from "next/image";
import Link from "next/link";
import { Props } from "next/script";
import React, { PropsWithChildren } from "react";
const TwitterHandle: React.FC<PropsWithChildren> = ({ children }) => {
return <span className="text-blue-500">{children}</span>;
};
const Author: React.FC<PropsWithChildren<{ href: string }>> = ({ children, href }) => (
<Link target="_blank" rel="noopener noreferrer" href={href} className="duration-150 text-zinc-200 hover:text-zinc-50">
{children}
</Link>
);
const Title: React.FC<PropsWithChildren<{ href: string }>> = ({ children, href }) => (
<Link
target="_blank"
rel="noopener noreferrer"
href={href}
className="text-sm duration-150 text-zinc-500 hover:text-zinc-300"
>
{children}
</Link>
);
export const Testimonials = () => {
const posts: {
content: React.ReactNode;
link: string;
author: {
name: React.ReactNode;
title?: React.ReactNode;
image: string;
};
}[] = [
{
content: (
<div>
<p>
My cursory audit of <TwitterHandle>@chronark_</TwitterHandle>'s envshare:
</p>
<p>
It is light, extremely functional, and does its symmetric block cipher correctly, unique initialization
vectors, decryption keys derived securely.
</p>
<br />
<p>Easily modified to remove minimal analytics. Superior to Privnote.</p>
<br />
<p>Self-hosting is easy. 👏</p>
</div>
),
link: "https://twitter.com/FrederikMarkor/status/1615299856205250560",
author: {
name: <Author href="https://jyunko.cn">HsiangNianian</Author>,
title: <Title href="https://github.com/Hsiangianian">Owner/Contributor @简律纯</Title>,
image: "https://github.com/HsiangNianian.png",
},
},
// {
// content: (
// <div>
// <p>I'm particularly chuffed about this launch, for a couple of reasons:</p>
// <ul>
// <li>
// ◆ Built on <TwitterHandle>@nextjs</TwitterHandle> + <TwitterHandle>@upstash</TwitterHandle>, hosted on{" "}
// <TwitterHandle>@vercel</TwitterHandle>
// </li>
// <li>◆ 100% free to use & open source</li>
// <li>◆ One-click deploy via Vercel + Upstash integration</li>
// </ul>
// <p>Deploy your own → http://vercel.fyi/envshare</p>
// </div>
// ),
// link: "https://twitter.com/steventey/status/1615035241772482567?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1615035241772482567%7Ctwgr%5E1db44bb10c690189e24c980fcd787299961c34c6%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fsteventey2Fstatus2F1615035241772482567widget%3DTweet",
// author: {
// name: <Author href="https://twitter.com/steventey">Steven Tey</Author>,
// title: <Title href="https://vercel.com">Senior Developer Advocate at Vercel</Title>,
// image: "https://pbs.twimg.com/profile_images/1506792347840888834/dS-r50Je_400x400.jpg",
// },
// },
// {
// content: (
// <div>
// <p>
// Congratulations on the launch <TwitterHandle>@chronark_</TwitterHandle>👏! This is such a valuable product
// for developers. Icing on the cake is that it's open source! ✨
// </p>
// </div>
// ),
// link: "https://twitter.com/DesignSiddharth/status/1615293209164546048",
// author: {
// name: <Author href="https://twitter.com/DesignSiddharth">@DesignSiddharth</Author>,
// image: "https://pbs.twimg.com/profile_images/1613772710009765888/MbSblJYf_400x400.jpg",
// },
// },
];
return (
<section className="container mx-auto">
<ul role="list" className="grid max-w-2xl grid-cols-1 gap-16 mx-auto sm:gap-8 lg:max-w-none lg:grid-cols-3">
{posts.map((post, i) => (
<div
key={i}
className="flex flex-col justify-between duration-150 border rounded border-zinc-500/30 hover:border-zinc-300/30 hover:bg-zinc-900/30 group"
>
<Link href={post.link} className="whitespace-pre-line text text-zinc-500 p-6">
{post.content}
</Link>
<div className="relative flex items-start justify-between p-6 duration-150 border-t bg-zinc-900/40 border-zinc-500/30 group-hover:border-zinc-300/30">
<div>
<div className="text-base font-display text-zinc-200">{post.author.name}</div>
<div className="mt-1 text-sm text-zinc-500">{post.author.title}</div>
</div>
<div className="overflow-hidden rounded-full bg-zinc-50">
<Image className="object-cover h-14 w-14" src={post.author.image} alt="" width={56} height={56} />
</div>
</div>
</div>
))}
</ul>
</section>
);
};
|