Skip to content

Commit 5620ace

Browse files
torinmbtorinmb
committed
initial website setup
1 parent 1aa1a9d commit 5620ace

File tree

12 files changed

+1469
-10
lines changed

12 files changed

+1469
-10
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

3+
.env
4+
35
# dependencies
46
/node_modules
57
/.pnp

Diff for: ‎components/nav.tsx

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* This example requires Tailwind CSS v2.0+ */
2+
import { Fragment } from 'react'
3+
import { Disclosure, Menu, Transition } from '@headlessui/react'
4+
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
5+
6+
const navigation = [
7+
{ name: 'Home', href: '#', current: true },
8+
{ name: 'Explore', href: '/explore', current: false },
9+
{ name: 'Docs', href: '#', current: false },
10+
{ name: 'Forum', href: '#', current: false },
11+
{ name: 'About', href: '#', current: false },
12+
]
13+
14+
function classNames(...classes: any[]) {
15+
return classes.filter(Boolean).join(' ')
16+
}
17+
18+
export default function Nav() {
19+
return (
20+
<Disclosure as="nav" className="bg-gray-800">
21+
{({ open }) => (
22+
<>
23+
<div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
24+
<div className="relative flex items-center justify-between h-16">
25+
<div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
26+
{/* Mobile menu button*/}
27+
<Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
28+
<span className="sr-only">Open main menu</span>
29+
{open ? (
30+
<XIcon className="block h-6 w-6" aria-hidden="true" />
31+
) : (
32+
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
33+
)}
34+
</Disclosure.Button>
35+
</div>
36+
<div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
37+
<div className="flex-shrink-0 flex items-center">
38+
{/* <img
39+
className="block lg:hidden h-8 w-auto"
40+
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
41+
alt="Workflow"
42+
/> */}
43+
<span className="h-8 w-auto text-white">Shader Park</span>
44+
{/* <img
45+
className="hidden lg:block h-8 w-auto"
46+
src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
47+
alt="Workflow"
48+
/> */}
49+
</div>
50+
<div className="hidden sm:block sm:ml-6">
51+
<div className="flex space-x-4">
52+
{navigation.map((item) => (
53+
<a
54+
key={item.name}
55+
href={item.href}
56+
className={classNames(
57+
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
58+
'px-3 py-2 rounded-md text-sm font-medium'
59+
)}
60+
aria-current={item.current ? 'page' : undefined}
61+
>
62+
{item.name}
63+
</a>
64+
))}
65+
</div>
66+
</div>
67+
</div>
68+
<a href="/new" className="hover:bg-blue-400 group flex items-center rounded-md bg-blue-500 text-white text-sm font-medium pl-2 pr-3 py-2 shadow-sm">
69+
<svg width="20" height="20" fill="currentColor" className="mr-2" aria-hidden="true">
70+
<path d="M10 5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H6a1 1 0 1 1 0-2h3V6a1 1 0 0 1 1-1Z" />
71+
</svg>
72+
New Shader
73+
</a>
74+
<div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
75+
<button
76+
type="button"
77+
className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
78+
>
79+
<span className="sr-only">View notifications</span>
80+
<BellIcon className="h-6 w-6" aria-hidden="true" />
81+
</button>
82+
83+
{/* Profile dropdown */}
84+
<Menu as="div" className="ml-3 relative">
85+
<div>
86+
<Menu.Button className="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
87+
<span className="sr-only">Open user menu</span>
88+
<img
89+
className="h-8 w-8 rounded-full"
90+
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
91+
alt=""
92+
/>
93+
</Menu.Button>
94+
</div>
95+
<Transition
96+
as={Fragment}
97+
enter="transition ease-out duration-100"
98+
enterFrom="transform opacity-0 scale-95"
99+
enterTo="transform opacity-100 scale-100"
100+
leave="transition ease-in duration-75"
101+
leaveFrom="transform opacity-100 scale-100"
102+
leaveTo="transform opacity-0 scale-95"
103+
>
104+
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
105+
<Menu.Item>
106+
{({ active }) => (
107+
<a
108+
href="#"
109+
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
110+
>
111+
Your Profile
112+
</a>
113+
)}
114+
</Menu.Item>
115+
<Menu.Item>
116+
{({ active }) => (
117+
<a
118+
href="#"
119+
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
120+
>
121+
Settings
122+
</a>
123+
)}
124+
</Menu.Item>
125+
<Menu.Item>
126+
{({ active }) => (
127+
<a
128+
href="#"
129+
className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
130+
>
131+
Sign out
132+
</a>
133+
)}
134+
</Menu.Item>
135+
</Menu.Items>
136+
</Transition>
137+
</Menu>
138+
</div>
139+
</div>
140+
</div>
141+
142+
<Disclosure.Panel className="sm:hidden">
143+
<div className="px-2 pt-2 pb-3 space-y-1">
144+
{navigation.map((item) => (
145+
<Disclosure.Button
146+
key={item.name}
147+
as="a"
148+
href={item.href}
149+
className={classNames(
150+
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
151+
'block px-3 py-2 rounded-md text-base font-medium'
152+
)}
153+
aria-current={item.current ? 'page' : undefined}
154+
>
155+
{item.name}
156+
</Disclosure.Button>
157+
))}
158+
</div>
159+
</Disclosure.Panel>
160+
</>
161+
)}
162+
</Disclosure>
163+
)
164+
}

Diff for: ‎components/sculptureCard.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { HeartIcon } from '@heroicons/react/outline'
2+
import { HeartIcon as HeartIconSolid } from '@heroicons/react/solid'
3+
import Link from "next/link";
4+
5+
export default function SculptureCard(props: any) {
6+
const sculpture = props.sculpture;
7+
console.log('sculp', sculpture);
8+
return (
9+
<>
10+
{/* {products.map((product) => ( */}
11+
<div key={sculpture.id} className="group relative">
12+
<Link href={'/sculpture/'+sculpture.id}>
13+
<div className="w-full min-h-80 bg-transparent aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
14+
15+
<img
16+
src={sculpture.thumbnail}
17+
alt={sculpture.imageAlt}
18+
className="w-full h-full object-center object-cover lg:w-full lg:h-full"
19+
/>
20+
21+
</div>
22+
</Link>
23+
<div className="mt-4 flex justify-between">
24+
<div>
25+
<Link href={'/sculpture/'+sculpture.id}>
26+
<h3 className="text-sm text-gray-700">
27+
<span aria-hidden="true" className="absolute inset-0" />
28+
{sculpture.title}
29+
</h3>
30+
</Link>
31+
<p className="mt-1 text-sm text-gray-500">{sculpture.username}</p>
32+
</div>
33+
<div className="flex">
34+
{ sculpture.favorited? <HeartIconSolid className="h-6 w-6 inline mr-1" ></HeartIconSolid> :
35+
<HeartIcon className="h-6 w-6 inline mr-1" ></HeartIcon>
36+
}
37+
38+
<p className="text-sm font-medium text-gray-900">{sculpture.favorites}</p>
39+
</div>
40+
</div>
41+
</div>
42+
{/* ))} */}
43+
</>
44+
)
45+
}

Diff for: ‎firebase/clientApp.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { initializeApp } from 'firebase/app';
2+
// import "firebase/auth";
3+
// import "firebase/firestore";
4+
5+
const clientCredentials = {
6+
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7+
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
8+
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
9+
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
10+
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
11+
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
12+
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
13+
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
14+
};
15+
16+
console.log(clientCredentials)
17+
18+
19+
const firebaseApp = initializeApp(clientCredentials);
20+
21+
22+
export default firebaseApp;

Diff for: ‎next.config.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
/** @type {import('next').NextConfig} */
2-
module.exports = {
2+
3+
const withTM = require('next-transpile-modules')(['shader-park-core']);
4+
5+
module.exports = withTM({
36
reactStrictMode: true,
4-
}
7+
});

Diff for: ‎package.json

+9-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,17 @@
66
"start": "next start"
77
},
88
"dependencies": {
9+
"@headlessui/react": "^1.6.6",
10+
"@heroicons/react": "^1.0.6",
11+
"@tailwindcss/aspect-ratio": "^0.4.0",
12+
"firebase": "^9.9.2",
913
"next": "latest",
14+
"next-transpile-modules": "^9.0.0",
1015
"react": "18.1.0",
11-
"react-dom": "18.1.0"
16+
"react-dom": "18.1.0",
17+
"react-firebase-hooks": "^5.0.3",
18+
"react-firebaseui": "^6.0.0",
19+
"shader-park-core": "^0.1.30"
1220
},
1321
"devDependencies": {
1422
"@types/node": "17.0.35",

Diff for: ‎pages/_app.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import '../styles/globals.css'
22
import type { AppProps } from 'next/app'
3+
import Nav from "../components/nav"
34

45
function MyApp({ Component, pageProps }: AppProps) {
5-
return <Component {...pageProps} />
6+
return (
7+
<>
8+
<Nav/>
9+
<Component {...pageProps} />
10+
</>
11+
)
612
}
713

814
export default MyApp

Diff for: ‎pages/explore.tsx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import type { NextPage } from 'next'
2+
import SculptureCard from "../components/sculptureCard"
3+
import firebaseApp from '../firebase/clientApp'
4+
5+
import { ref, getDatabase, query, orderByChild } from 'firebase/database';
6+
import { useList } from 'react-firebase-hooks/database';
7+
8+
const database = getDatabase(firebaseApp);
9+
10+
const Explore: NextPage = () => {
11+
12+
var dbRef = ref(database, 'sculptures')
13+
// const dbQuery = dbRef.orderBy("timestamp");
14+
const mostViewedPosts = query(dbRef, orderByChild('favorites'));
15+
16+
17+
// let [snapshots, loading, error] = useList(ref(database, 'sculptures'));
18+
let [snapshots, loading, error] = useList(mostViewedPosts);
19+
if(!loading && snapshots) {
20+
21+
snapshots = snapshots?.reverse().slice(0, 100);
22+
console.log(snapshots[0].val())
23+
return (
24+
<>
25+
{/* <input type="range" min="1" max="10" value="4"></input> */}
26+
<main className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
27+
<h2 className="text-2xl font-extrabold tracking-tight text-gray-900">New Sculptures</h2>
28+
<div className="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
29+
{ snapshots.map((v) => (
30+
<SculptureCard sculpture={v.val()}/>
31+
)) }
32+
</div>
33+
</main>
34+
</>
35+
)
36+
37+
}
38+
return (
39+
<>
40+
{/* {error && <strong>Error: {error}</strong>} */}
41+
{loading && <span>List: Loading...</span>}
42+
{!loading && snapshots && (
43+
<>
44+
45+
{/* <div className="flex min-h-screen flex-col items-center justify-center py-2"> */}
46+
47+
{/* <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center"> */}
48+
<main className="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
49+
<h2 className="text-2xl font-extrabold tracking-tight text-gray-900">New Sculptures</h2>
50+
{ sculptures.map((sculpture) => (
51+
<SculptureCard sculpture={sculpture}/>
52+
))
53+
}
54+
55+
</main>
56+
{/* </main> */}
57+
{/* </div> */}
58+
</>
59+
)}
60+
</>
61+
)
62+
}
63+
64+
export default Explore

Diff for: ‎pages/index.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import type { NextPage } from 'next'
22
import Head from 'next/head'
33
import Image from 'next/image'
4+
import Nav from "../components/nav"
5+
import SculptureCard from "../components/sculptureCard"
46

57
const Home: NextPage = () => {
68
return (
9+
<>
10+
{/* <SculptureCard></SculptureCard> */}
711
<div className="flex min-h-screen flex-col items-center justify-center py-2">
812
<Head>
913
<title>Create Next App</title>
1014
<link rel="icon" href="/favicon.ico" />
1115
</Head>
12-
16+
1317
<main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
1418
<h1 className="text-6xl font-bold">
1519
Welcome to{' '}
@@ -80,6 +84,7 @@ const Home: NextPage = () => {
8084
</a>
8185
</footer>
8286
</div>
87+
</>
8388
)
8489
}
8590

0 commit comments

Comments
 (0)