Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add clerk for auth #13

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add clerk for auth #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f57e15
setup clerk
kevinreber Sep 2, 2024
a4020a8
updated navigation sidebar
kevinreber Sep 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
# Since the ".env" file is gitignored, you can use the ".env.example" file to
# build a new ".env" file when you clone the repo. Keep this file up-to-date
# when you add new variables to `.env`.

# This file will be committed to version control, so make sure not to have any
# secrets in it. If you are cloning this repo, create a copy of this file named
# ".env" and populate it with your secrets.

# When adding additional environment variables, the schema in "/src/env.mjs"
# should be updated accordingly.

ORIGIN=""

# Prisma DB
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
DATABASE_URL=""

# Google API
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""

# Dall E API
DALLE_API_KEY=""
USE_MOCK_DALLE="true"

# Stable Diffusion API
STABLE_DIFFUSION_API_KEY=""
STABLE_DIFFUSION_API_ENDPOINT=""

# AWS/S3 API
ACCESS_KEY_ID_AWS=""
SECRET_ACCESS_KEY_AWS=""
REGION_AWS="us-east-2"
S3_BUCKET_URL_AWS=""
S3_BUCKET_THUMBNAIL_URL_AWS=""
S3_BUCKET_NAME_AWS=""

# Stripe API
STRIPE_PUBLISHABLE_KEY=""
STRIPE_SECRET_KEY=""
STRIPE_CREDITS_PRICE_ID=""
STRIPE_WEB_HOOK_SECRET=""

# Honeypot
HONEYPOT_SECRET="SOME_SECRET_HONEYPOT"

# CSRF
SESSION_SECRET="SOME_SECRET_SESSION"

# Clerk
CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""
236 changes: 105 additions & 131 deletions app/components/NavigationSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,6 @@ import React from "react";
import PixelStudioIcon from "components/PixelStudioIcon";
import { Link } from "@remix-run/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Search,
Layers,
Expand All @@ -19,7 +11,44 @@ import {
LogOut,
CreditCard,
} from "lucide-react";
// import { useLoggedInUser } from "~/hooks";
import {
SignedIn,
SignedOut,
SignInButton,
SignUpButton,
UserButton,
useUser,
} from "@clerk/remix";

const NAV_LINKS = [
{
title: "Explore",
icon: <Search className="md:h-4 md:w-4" />,
href: "/explore",
},
{
title: "Collections",
icon: <Layers className="md:h-4 md:w-4" />,
href: "/collections",
},
{
title: "Create",
icon: <PenTool className="md:h-4 md:w-4" />,
href: "/create",
},
{
title: "Profile",
icon: <User className="md:h-4 md:w-4" />,
// href: `/profile/${userData?.username || ""}`,
href: `/profile/`,
},
// ! TODO: Hide for now, get barebones out first
// {
// title: "Manage",
// icon: <Settings className="md:h-4 md:w-4" />,
// href: "/manage",
// },
];

const NavButton = ({
title,
Expand All @@ -37,58 +66,22 @@ const NavButton = ({
{...props}
>
{icon}
{/* </span> */}
<span className="ml-2">{title}</span>
</a>
);

const NavigationSidebar = () => {
const { user } = useUser();
console.log(user);

const [credits, setCredits] = React.useState(31);
// const userData = React.useContext(UserContext);
// const userData = useLoggedInUser();
// const isLoggedIn = Boolean(userData?.id);
const userData = {
name: "John Doe",
username: "johndoe",
};
const NAV_LINKS = [
{
title: "Explore",
icon: <Search className="md:h-4 md:w-4" />,
href: "/explore",
},
{
title: "Collections",
icon: <Layers className="md:h-4 md:w-4" />,
href: "/collections",
},
{
title: "Create",
icon: <PenTool className="md:h-4 md:w-4" />,
href: "/create",
},
{
title: "Profile",
icon: <User className="md:h-4 md:w-4" />,
// href: `/profile/${userData?.username || ""}`,
href: `/profile/`,
},
// ! TODO: Hide for now, get barebones out first
// {
// title: "Manage",
// icon: <Settings className="md:h-4 md:w-4" />,
// href: "/manage",
// },
];

// const navLinksToRender = isLoggedIn ? NAV_LINKS : [];
const navLinksToRender = NAV_LINKS;

return (
<>
{/* <div className="flex h-screen bg-black text-white"> */}
<aside className="hidden md:flex flex-col w-64 p-4 border-r h-screen fixed top-0 left-0 bottom-0 z-10 text-xl">
{/* <aside className="flex flex-col w-64 bg-[#111] p-4"> */}
<div className="flex items-center mb-8">
<div className="flex align-baseline">
<div className="w-8 mr-3">
Expand All @@ -99,65 +92,54 @@ const NavigationSidebar = () => {
</div>

<nav className="flex-1 space-y-1 font-medium">
{navLinksToRender.map((link) => (
<NavButton
key={link.href}
title={link.title}
icon={link.icon}
link={link.href}
/>
))}
<SignedIn>
{NAV_LINKS.map((link) => (
<NavButton
key={link.href}
title={link.title}
icon={link.icon}
link={link.href}
/>
))}
</SignedIn>
</nav>

<div className="mt-auto pt-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 hover:bg-gray-800 hover:text-white transition-colors">
<Avatar>
<AvatarImage
src="/placeholder.svg?height=32&width=32"
alt="User"
/>
<AvatarFallback>JS</AvatarFallback>
</Avatar>
<div className="text-left flex-1">
<div className="font-medium">Jon Smith</div>
<div className="text-xs text-gray-400">jonsmith</div>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end" forceMount>
<DropdownMenuLabel className="font-normal">
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">Jon Smith</p>
<p className="text-xs leading-none text-muted-foreground">
jonsmith
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>{credits} Credits</span>
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCard className="mr-2 h-4 w-4" />
<span>Buy Credits</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuItem>
<LogOut className="mr-2 h-4 w-4" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<SignedIn>
<div className="w-full flex flex-col items-start align-baseline px-3 py-2 rounded-md text-gray-300 transition-colors font-medium mb-3">
<div className="flex items-center ">
<CreditCard className="md:h-4 md:w-4" />
<span className="ml-2">{credits} Credits</span>
</div>
<div className="underline text-xs text-gray-400 ml-6">
<a href="/">Buy Credits</a>
</div>
</div>
<div className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-gray-300 ">
<UserButton />
<div className="text-left flex-1">
<div className="font-medium">{user?.fullName}</div>
<div className="text-xs text-gray-400">{user?.username}</div>
</div>
</div>
</SignedIn>
<SignedOut>
<div className="flex flex-col text-center">
<SignInButton>
<button className="rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200 mb-4">
Sign In
</button>
</SignInButton>
<SignUpButton>
<a href="/sign-up" className="text-sm underline">
Create an account
</a>
</SignUpButton>
</div>
</SignedOut>
</div>
</aside>
{/* </div> */}

<div
className="flex flex-col min-w-0 flex-1 overflow-hidden"
style={{
Expand All @@ -180,44 +162,36 @@ const NavigationSidebar = () => {
</Link>
</div>

{/* <div className="w-3"> */}
{/* <div className="w-8">
<PixelStudioIcon />
</div> */}
{/* </div> */}
{/* {isLoggedIn && ( */}
<div className="flex items-center">
{/* <UserAvatar /> */}
<Avatar>
<AvatarImage
src="/placeholder.svg?height=32&width=32"
alt="User"
/>
<AvatarFallback>JS</AvatarFallback>
</Avatar>
</div>
{/* )} */}
<SignedIn>
<UserButton />
</SignedIn>
</div>

{/* {isLoggedIn && ( */}
<div
className="fixed bottom-0 left-0 right-0 z-10 flex items-center justify-around bg-black py-4"
style={{
borderTop: "rgb(38, 38, 38) 1px solid",
}}
>
{navLinksToRender.map((link) => (
<Link
key={link.href}
className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
// className="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"
to={link.href}
>
<span>{link.icon}</span>
</Link>
))}
<SignedIn>
{NAV_LINKS.map((link) => (
<Link
key={link.href}
className="text-white group flex items-center px-2 py-2 text-medium font-medium rounded-md"
to={link.href}
>
<span>{link.icon}</span>
</Link>
))}
</SignedIn>
<SignedOut>
<SignInButton>
<button className="mx-6 w-full rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500 border border-gray-500 hover:bg-gray-800 hover:text-gray-200">
Sign In
</button>
</SignInButton>
</SignedOut>
</div>
{/* )} */}
</div>
</div>
</>
Expand Down
Loading