Skip to content

Commit d69458e

Browse files
dthyressondthyresson
committed
TailwindUI about placeholder
1 parent 7c907da commit d69458e

4 files changed

Lines changed: 98 additions & 96 deletions

File tree

‎app/lib/footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Link from "next/link";
33

44
export function Footer() {
55
const navigation = {
6-
main: [{ name: "About", href: "/about" }],
6+
main: [{ name: "🤔 How did we build this app?", href: "/about" }],
77
social: [
88
{
99
name: "Twitter",

‎app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@graphql-yoga/render-graphiql": "0.2.0-canary-32120c3.0",
13+
"@heroicons/react": "1.0.6",
1314
"@supabase/supabase-js": "1.31.2",
1415
"@supabase/ui": "0.36.4",
1516
"autoprefixer": "10.4.4",

‎app/pages/about.tsx‎

Lines changed: 91 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,113 @@
11
import React from "react";
22
import type { NextPage } from "next";
33
import Head from "next/head";
4+
45
import { useQuery } from "urql";
6+
7+
import {
8+
CloudUploadIcon,
9+
CogIcon,
10+
LockClosedIcon,
11+
MenuIcon,
12+
RefreshIcon,
13+
ServerIcon,
14+
ShieldCheckIcon,
15+
XIcon,
16+
} from "@heroicons/react/outline";
17+
518
import { gql } from "../gql";
619
import { Container } from "../lib/container";
720
import { FeedItem } from "../lib/feed-item";
8-
import { MainSection } from "../lib/main-section";
921
import { noopUUID } from "../lib/noop-uuid";
1022

1123
const About: NextPage = () => {
24+
const features = [
25+
{
26+
name: "Push to Deploy",
27+
description:
28+
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi vitae lobortis.",
29+
icon: CloudUploadIcon,
30+
},
31+
{
32+
name: "SSL Certificates",
33+
description:
34+
"Qui aut temporibus nesciunt vitae dicta repellat sit dolores pariatur. Temporibus qui illum aut.",
35+
icon: LockClosedIcon,
36+
},
37+
{
38+
name: "Simple Queues",
39+
description:
40+
"Rerum quas incidunt deleniti quaerat suscipit mollitia. Amet repellendus ut odit dolores qui.",
41+
icon: RefreshIcon,
42+
},
43+
{
44+
name: "Advanced Security",
45+
description:
46+
"Ullam laboriosam est voluptatem maxime ut mollitia commodi. Et dignissimos suscipit perspiciatis.",
47+
icon: ShieldCheckIcon,
48+
},
49+
{
50+
name: "Powerful API",
51+
description:
52+
"Ab a facere voluptatem in quia corrupti veritatis aliquam. Veritatis labore quaerat ipsum quaerat id.",
53+
icon: CogIcon,
54+
},
55+
{
56+
name: "Database Backups",
57+
description:
58+
"Quia qui et est officia cupiditate qui consectetur. Ratione similique et impedit ea ipsum et.",
59+
icon: ServerIcon,
60+
},
61+
];
62+
1263
return (
1364
<Container>
1465
<Head>
1566
<title>supanews | About</title>
1667
<meta name="description" content="What is hot?" />
1768
<link rel="icon" href="/favicon.ico" />
1869
</Head>
19-
20-
<MainSection>
21-
<section className="text-gray-600 body-font overflow-hidden w-full">
22-
<div className="container px-3 py-24 mx-auto">
23-
<div className="-my-8">
24-
<h1 className="text-2xl py-6">Supabase PG GraphQL Example App</h1>
25-
26-
<p>
27-
A basic HackerNews-like clone where posts can be submitted with
28-
url links and then up and down voted.
29-
</p>
30-
31-
<h2 className="text-xl pt-4">Showcase</h2>
32-
33-
<h3 className="text-lg py-6"> Backend pg_graphql / supabase</h3>
34-
<ul>
35-
<li>CRUD (Query + Mutation Operations)</li>
36-
<li>Cursor Based Pagination</li>
37-
<li>Authorization / RLS</li>
38-
</ul>
39-
<h3 className="text-lg py-6">Frontend</h3>
40-
<ul>
41-
<li>[Next.js](https://nextjs.org) React Framework</li>
42-
<li>
43-
[TypeScript](https://www.typescriptlang.org) TypeScript is a
44-
strongly typed programming language that builds on JavaScript,
45-
giving you better tooling at any scale.
46-
</li>
47-
<li>
48-
[graphql-code-generator](https://www.graphql-code-generator.com){" "}
49-
Generate code from your GraphQL schema and operations with a
50-
simple CLI
51-
</li>
52-
<li>
53-
[gql-tag-operations-preset](https://www.graphql-code-generator.com/plugins/gql-tag-operations-preset){" "}
54-
This code gen preset generates typings for your inline gql
55-
function usages, without having to manually specify import
56-
statements for the documents
57-
</li>
58-
<li>
59-
[urql](https://formidable.com/open-source/urql/) A highly
60-
customizable and versatile GraphQL client
61-
</li>
62-
<li>
63-
[Gravatar](https://en.gravatar.com) Default avatar profile
64-
images from Gravatar
65-
</li>
66-
</ul>
67-
<h3 className="text-lg py-6">Backend</h3>
68-
<ul>
69-
<li>
70-
[Supabase](https://supabase.com) Create a backend in less than
71-
2 minutes. Start your project with a Postgres Database,
72-
Authentication, instant APIs, Realtime subscriptions and
73-
Storage.
74-
</li>
75-
<li>
76-
[pg_graphql](https://supabase.com/blog/2021/12/03/pg-graphql){" "}
77-
A native [PostgreSQL
78-
extension](https://supabase.github.io/pg_graphql/) adding
79-
[GraphQL support](https://graphql.org). The extension keeps
80-
schema generation, query parsing, and resolvers all neatly
81-
contained on your database server requiring no external
82-
services.
83-
</li>
84-
<li>
85-
[Postgres
86-
Triggers](https://supabase.com/blog/2021/07/30/supabase-functions-updates)
87-
and [Postgres
88-
Functions](https://supabase.com/docs/guides/database/functions){" "}
89-
When votes are in, use triggers to invoke a Postgres function
90-
that calculates a post score to rank the feed
91-
</li>
92-
<li>
93-
[Postgres Enumerated
94-
Types](https://www.postgresql.org/docs/14/datatype-enum.html){" "}
95-
Enums help defined the direction of a vote: UP or DOWN.
96-
</li>
97-
</ul>
98-
<h3 className="text-lg py-6">Functionality</h3>
99-
<ul>
100-
<li>Registration</li>
101-
<li>Get a ranked feed of posts</li>
102-
<li>Create Post</li>
103-
<li>Delete Post</li>
104-
<li>Create Comment</li>
105-
<li>Delete Comment</li>
106-
<li>Upvote/Downvote Post</li>
107-
<li>View Profile (Account)</li>
108-
<li>View Profile (Public)</li>
109-
<li>Pagination (Posts, Comments)</li>
110-
</ul>
70+
<div className="relative bg-white py-4 sm:py-8 lg:py-12">
71+
<div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
72+
<h2 className="text-base font-semibold tracking-wider text-green-600 uppercase">
73+
Deploy faster
74+
</h2>
75+
<p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
76+
Everything you need to deploy your app
77+
</p>
78+
<p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
79+
Phasellus lorem quam molestie id quisque diam aenean nulla in.
80+
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
81+
condimentum id viverra nulla.
82+
</p>
83+
<div className="mt-12">
84+
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
85+
{features.map((feature) => (
86+
<div key={feature.name} className="pt-6">
87+
<div className="flow-root bg-gray-50 rounded-lg px-6 pb-8">
88+
<div className="-mt-6">
89+
<div>
90+
<span className="inline-flex items-center justify-center p-3 bg-gradient-to-r from-teal-500 to-green-600 rounded-md shadow-lg">
91+
<feature.icon
92+
className="h-6 w-6 text-white"
93+
aria-hidden="true"
94+
/>
95+
</span>
96+
</div>
97+
<h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">
98+
{feature.name}
99+
</h3>
100+
<p className="mt-5 text-base text-gray-500">
101+
{feature.description}
102+
</p>
103+
</div>
104+
</div>
105+
</div>
106+
))}
111107
</div>
112108
</div>
113-
</section>
114-
</MainSection>
109+
</div>
110+
</div>
115111
</Container>
116112
);
117113
};

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,11 @@
887887
resolved "https://registry.yarnpkg.com/@graphql-yoga/render-graphiql/-/render-graphiql-0.2.0-canary-32120c3.0.tgz#97636d7b4aabf11276db5c414d5566e37ea9cee1"
888888
integrity sha512-g67LngcYM75o2uknTkZ+FGl17rJGUL+nrhFgh4WZVcnxopSK6Bl8o83MXz6rbnYpwUzADbwejp1SHIto8O77Dw==
889889

890+
"@heroicons/react@1.0.6":
891+
version "1.0.6"
892+
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
893+
integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
894+
890895
"@humanwhocodes/config-array@^0.9.2":
891896
version "0.9.5"
892897
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7"

0 commit comments

Comments
 (0)