Skip to content

Commit

Permalink
fixed theme author on save and update
Browse files Browse the repository at this point in the history
  • Loading branch information
RodrigoLuglio committed Oct 13, 2024
1 parent b678411 commit 29f2e22
Show file tree
Hide file tree
Showing 16 changed files with 618 additions and 87 deletions.
Binary file modified bun.lockb
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.1",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-tooltip": "^1.1.2",
"@vercel/postgres": "^0.10.0",
"class-variance-authority": "^0.7.0",
Expand Down
13 changes: 0 additions & 13 deletions src/app/(private)/profile/[[...rest]]/page.tsx

This file was deleted.

12 changes: 11 additions & 1 deletion src/app/(private)/saved-themes/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,17 @@ export default async function SavedThemesPage() {

return (
<main className="mx-auto p-20">
<SavedThemesContent initialThemes={themes} />
{themes.length === 0 ? (
<div className="text-center py-8">
<h2 className="text-2xl font-semibold mb-4">No Saved Themes</h2>
<p className="text-gray-600 dark:text-gray-400">
You haven't saved any themes yet. Create and save a theme to see it
here!
</p>
</div>
) : (
<SavedThemesContent initialThemes={themes} />
)}
</main>
)
}
2 changes: 1 addition & 1 deletion src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
.dark {
--background: 70 0% 32%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card: 191 0% 26%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
Expand Down
4 changes: 3 additions & 1 deletion src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { ThemeProvider } from 'next-themes'
import { ClerkProvider } from '@clerk/nextjs'
import { auth } from '@clerk/nextjs/server'
import { dark } from '@clerk/themes'

import { Toaster } from '@/components/ui/toaster'
import Navigation from '@/components/Navigation'
import { ThemeProvider as ThemeProviderContext } from '@/contexts/ThemeContext'

Expand All @@ -27,7 +29,6 @@ export default function RootLayout({
<ClerkProvider
appearance={{
baseTheme: dark,
variables: { colorPrimary: '#3b82f6' }, // Customize the primary color
}}
>
<html lang="en">
Expand All @@ -41,6 +42,7 @@ export default function RootLayout({
<ThemeProviderContext userId={userId ?? undefined}>
<Navigation />
{children}
<Toaster />
</ThemeProviderContext>
</ThemeProvider>
</body>
Expand Down
85 changes: 55 additions & 30 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,65 @@
import Navigation from '@/components/Navigation'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import {
Card,
CardDescription,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card'

export default function Home() {
return (
<div>
<main className="container mx-auto mt-8 p-4">
<h1 className="text-4xl font-bold mb-4">
Welcome to VSCode Themes Community
</h1>
<p className="text-xl mb-4">
Generate, edit, download, share, and discover new themes for Visual
Studio Code.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="bg-gray-100 p-4 rounded-lg">
<h2 className="text-2xl font-semibold mb-2">Create a Theme</h2>
<p>
Use our powerful theme generator to create your perfect VSCode
theme.
<main className="p-10">
<div className="flex flex-col items-center justify-between h-[calc(100vh-9rem)]">
<div></div>
<div className="flex flex-col items-center justify-center">
<h1 className="text-4xl font-bold mb-4">
Welcome to VSCode Themes Community
</h1>
<p className="text-xl mb-4 text-muted-foreground">
Generate, edit, download, share, and discover new themes for
Visual Studio Code.
</p>
<Link
href="/generator"
className="mt-2 inline-block bg-blue-500 text-white px-4 py-2 rounded"
>
Get Started
</Link>
</div>
<div className="bg-gray-100 p-4 rounded-lg">
<h2 className="text-2xl font-semibold mb-2">Discover Themes</h2>
<p>Browse and download themes created by the community.</p>
<Link
href="/discover"
className="mt-2 inline-block bg-green-500 text-white px-4 py-2 rounded"
>
Explore Themes
</Link>
<div className="flex items-stretch justify-center gap-10">
<Card className="flex-1">
<CardHeader>
<CardTitle>Discover Themes</CardTitle>
<CardDescription>
Browse and download install-ready themes created by the
community.
</CardDescription>
</CardHeader>
<CardContent>
<p></p>
</CardContent>
<CardFooter>
<Button>
<Link href="/discover">Explore Themes</Link>
</Button>
</CardFooter>
</Card>
<Card className="flex-1">
<CardHeader>
<CardTitle>Create a Theme</CardTitle>
<CardDescription>
Create and edit your next VSCode theme in a tool with a newly
designed algorithm that uses sacred geometry patterns to
generate harmonized and pleasent colors to use in your theme.
</CardDescription>
</CardHeader>
<CardContent>
<p></p>
</CardContent>
<CardFooter>
<Button>
<Link href="/generator">Get Started</Link>
</Button>
</CardFooter>
</Card>
</div>
</div>
</main>
Expand Down
1 change: 0 additions & 1 deletion src/components/Navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ const Navigation = () => {
<SignedIn>
<Link href="/generator">Create</Link>
<Link href="/saved-themes">Your Themes</Link>
<Link href="/profile">Profile</Link>
<UserButton />
</SignedIn>
<SignedOut>
Expand Down
52 changes: 48 additions & 4 deletions src/components/ThemeSaver.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Input } from '@/components/ui/input'
import { ActionButton } from '@/components/ActionButton'
import { Switch } from '@/components/ui/switch'
import { useUser } from '@clerk/nextjs'
import { useToast } from '@/hooks/use-toast'

interface ThemeSaverProps {
themeName: string
Expand Down Expand Up @@ -33,6 +34,7 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
} = useTheme()

const { user } = useUser()
const { toast } = useToast()
const [isPending, startTransition] = useTransition()

const handlePublicToggle = (checked: boolean) => {
Expand All @@ -44,12 +46,27 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
})
}

const userName = () => {
console.log(user?.username)
if (user) {
if (user.firstName != null && user.lastName != null) {
return user.firstName + ' ' + user.lastName
} else if (user.firstName != null) {
return user.firstName
} else if (user.primaryEmailAddress?.emailAddress != null) {
return user.primaryEmailAddress.emailAddress.split('@')[0]
}
return 'Anonymous'
}
}

const handleSave = () => {
if (!user) return

startTransition(async () => {
if (currentThemeId) {
await updateCurrentTheme(currentThemeId, {
// Handle update case
const result = await updateCurrentTheme(currentThemeId, {
name: themeName.trim(),
public: isPublic,
uiColors: colors,
Expand All @@ -60,10 +77,24 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
uiSaturation: uiSaturation,
syntaxSaturation: syntaxSaturation,
scheme: scheme,
userName: user.firstName + ' ' + user.lastName,
userName: userName() || 'Anonymous',
})
if (result.success) {
toast({
title: 'Theme updated',
description: 'Your theme has been successfully updated.',
})
} else {
toast({
title: 'Error',
description:
result.error || 'An error occurred while updating the theme.',
variant: 'destructive',
})
}
} else {
await saveCurrentTheme({
// Handle save new theme case
const result = await saveCurrentTheme({
name: themeName.trim(),
userId: user.id,
public: isPublic,
Expand All @@ -75,8 +106,21 @@ const ThemeSaver: React.FC<ThemeSaverProps> = ({
uiSaturation: uiSaturation,
syntaxSaturation: syntaxSaturation,
scheme: scheme,
userName: user.firstName + ' ' + user.lastName,
userName: userName() || 'Anonymous',
})
if (result.success) {
toast({
title: 'Theme saved',
description: 'Your new theme has been successfully saved.',
})
} else {
toast({
title: 'Error',
description:
result.error || 'An error occurred while saving the theme.',
variant: 'destructive',
})
}
}
})
}
Expand Down
76 changes: 76 additions & 0 deletions src/components/ui/card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-xl border bg-card text-card-foreground shadow",
className
)}
{...props}
/>
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props}
/>
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
Loading

0 comments on commit 29f2e22

Please sign in to comment.