Skip to content

Commit

Permalink
feat(GIST-48): landing page (#16)
Browse files Browse the repository at this point in the history
* setup logout

* landing page ui
  • Loading branch information
dorian-grst authored Oct 10, 2024
1 parent d73d5b7 commit 371b610
Show file tree
Hide file tree
Showing 17 changed files with 615 additions and 496 deletions.
134 changes: 39 additions & 95 deletions src/app/(gistLayout)/layout-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,39 @@
import { TeamListFeature } from "@/components/feature/team-list-feature";
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/shadcn/avatar";
import { Button } from "@/components/shadcn/button";
import { Codearea } from "@/components/shadcn/codearea";
import { Input } from "@/components/shadcn/input";
import { Textarea } from "@/components/shadcn/textarea";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/shadcn/tooltip";
import MenuButton from "@/components/ui/menu-button";
import { Modal } from "@/components/ui/modal";
import { ProfileDropdown } from "@/components/ui/profile-dropdown";
import Shortcut from "@/components/ui/shortcut";
import { getLanguage } from "@/lib/language";
import { FileCodeIcon, LucidePencil, Menu, PlusIcon } from "lucide-react";
import { useState } from "react";
import { TeamListFeature } from '@/components/feature/team-list-feature'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/shadcn/avatar'
import { Button } from '@/components/shadcn/button'
import { Codearea } from '@/components/shadcn/codearea'
import { Input } from '@/components/shadcn/input'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/shadcn/tooltip'
import MenuButton from '@/components/ui/menu-button'
import { Modal } from '@/components/ui/modal'
import { ProfileDropdown } from '@/components/ui/profile-dropdown'
import Shortcut from '@/components/ui/shortcut'
import { getLanguage } from '@/lib/language'
import { FileCodeIcon, LucidePencil, Menu, PlusIcon } from 'lucide-react'
import { useState } from 'react'

interface GistLayoutProps {
username: string;
avatar: string;
children: React.ReactNode;
onMyGistsClick: () => void;
onCreateTeamClick: (name: string) => void;
onCreateGistClick: (name: string, content: string) => void;
username: string
avatar: string
children: React.ReactNode
onMyGistsClick: () => void
onCreateTeamClick: (name: string) => void
onCreateGistClick: (name: string, content: string) => void
onLogoutClick: () => void
}

export default function GistLayout({
avatar,
children,
username,
onMyGistsClick,
onCreateTeamClick,
onCreateGistClick,
}: GistLayoutProps) {
const [gistName, setGistName] = useState("");
const [gistContent, setGistContent] = useState("");
const [teamName, setTeamName] = useState("");
export default function GistLayout({ avatar, children, username, onMyGistsClick, onCreateTeamClick, onCreateGistClick, onLogoutClick }: GistLayoutProps) {
const [gistName, setGistName] = useState('')
const [gistContent, setGistContent] = useState('')
const [teamName, setTeamName] = useState('')

const language = getLanguage(gistName);
const language = getLanguage(gistName)

const handleCreateGistClick = () => {
onCreateGistClick(gistName, gistContent);
setGistName("");
setGistContent("");
};
onCreateGistClick(gistName, gistContent)
setGistName('')
setGistContent('')
}

return (
<div className="w-full h-screen flex flex-row p-2">
Expand All @@ -58,11 +42,9 @@ export default function GistLayout({
<div className="flex flex-row justify-start items-center gap-2">
<Avatar className="h-8 w-8 flex-shrink-0">
<AvatarImage src={avatar} />
<AvatarFallback className="bg-muted-foreground">
{username.charAt(0).toUpperCase()}
</AvatarFallback>
<AvatarFallback className="bg-muted-foreground">{username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar>
<ProfileDropdown username={username} />
<ProfileDropdown username={username} onLogoutClick={onLogoutClick} />
</div>

<TooltipProvider>
Expand All @@ -71,22 +53,13 @@ export default function GistLayout({
<Modal
title="New Gist"
trigger={
<Button
className="w-8 h-8 flex-shrink-0"
size={"icon"}
variant={"icon"}
>
<Button className="w-8 h-8 flex-shrink-0" size={'icon'} variant={'icon'}>
<LucidePencil className="w-4 h-4" />
</Button>
}
content={
<div className="flex flex-col gap-3">
<Input
className="border-0 bg-background p-0 h-min font-bold"
placeholder="Gist name"
value={gistName}
onChange={(e) => setGistName(e.target.value)}
/>
<Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Gist name" value={gistName} onChange={(e) => setGistName(e.target.value)} />
<Codearea
className="border-0 bg-background p-0 font-normal"
placeholder="Write content..."
Expand All @@ -97,12 +70,7 @@ export default function GistLayout({
</div>
}
footer={
<MenuButton
variant="default"
size="sm"
onClick={handleCreateGistClick}
className=""
>
<MenuButton variant="default" size="sm" onClick={handleCreateGistClick}>
Create
</MenuButton>
}
Expand All @@ -116,47 +84,23 @@ export default function GistLayout({
</TooltipProvider>
</div>
<div className="flex flex-col gap-2">
<MenuButton
icon={<FileCodeIcon />}
variant="menu"
size="menu"
letter="M"
onClick={onMyGistsClick}
href="/mygist"
className="w-full"
>
<MenuButton icon={<FileCodeIcon />} variant="menu" size="menu" letter="M" onClick={onMyGistsClick} href="/mygist" className="w-full">
My Gists
</MenuButton>
<Modal
trigger={
<MenuButton
icon={<PlusIcon />}
variant="menu"
size="menu"
letter="T"
className="w-full"
>
<MenuButton icon={<PlusIcon />} variant="menu" size="menu" letter="T" className="w-full">
Create team
</MenuButton>
}
title="Create Team"
content={
<div className="flex flex-col gap-3">
<Input
className="border-0 bg-background p-0 h-min font-bold"
placeholder="Team name"
value={teamName}
onChange={(e) => setTeamName(e.target.value)}
/>
<Input className="border-0 bg-background p-0 h-min font-bold" placeholder="Team name" value={teamName} onChange={(e) => setTeamName(e.target.value)} />
</div>
}
footer={
<MenuButton
variant="default"
size="sm"
onClick={() => onCreateTeamClick(teamName)}
className=""
>
<MenuButton variant="default" size="sm" onClick={() => onCreateTeamClick(teamName)} className="">
Create
</MenuButton>
}
Expand All @@ -166,5 +110,5 @@ export default function GistLayout({
</div>
{children}
</div>
);
)
}
69 changes: 35 additions & 34 deletions src/app/(gistLayout)/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,66 +1,67 @@
"use client";
'use client'

import { ReactNode, useCallback } from "react";
import GistLayout from "./layout-ui";
import { useMe } from "@/lib/queries/user.queries";
import { toast, useToast } from "@/components/shadcn/use-toast";
import { useCreateGist } from "@/lib/queries/gists.queries";
import { useCreateOrg } from "@/lib/queries/orgs.queries";
import { ReactNode, useCallback } from 'react'
import GistLayout from './layout-ui'
import { useMe } from '@/lib/queries/user.queries'
import { useToast } from '@/components/shadcn/use-toast'
import { useCreateGist } from '@/lib/queries/gists.queries'
import { useCreateOrg } from '@/lib/queries/orgs.queries'

export default function GistLayoutFeature({
children,
}: {
children: ReactNode;
}) {
const { data } = useMe();
const { toast } = useToast();
export default function GistLayoutFeature({ children }: { children: ReactNode }) {
const { data } = useMe()
const { toast } = useToast()
const { mutate: createGist } = useCreateGist({
onSuccess: () => {
toast({
title: "Gist Created",
description: "Your gist has been created successfully",
});
title: 'Gist Created',
description: 'Your gist has been created successfully',
})
},
});
})

const { mutate: createTeam } = useCreateOrg({
onSuccess: () => {
toast({
title: "Team Created",
description: "Your team has been created successfully",
});
title: 'Team Created',
description: 'Your team has been created successfully',
})
},
});
})

const onMyGistsClick = () => {
console.log("My Gists clicked");
};
console.log('My Gists clicked')
}

const onCreateTeamClick = useCallback(
(name: string) => {
createTeam(name);
console.log("Creating tea with name:", name);
createTeam(name)
console.log('Creating team with name:', name)
},
[toast, createTeam],
);
[toast, createTeam]
)

const onLogoutClick = () => {
console.log('/logout')
}

const onCreateGistClick = (name: string, content: string) => {
console.log(`Creating gist with name: ${name} \nand content: ${content}`);
console.log(`Creating gist with name: ${name} \nand content: ${content}`)
createGist({
content,
name,
});
};
})
}

return (
<GistLayout
username={data?.name ?? ""}
avatar={data?.picture ?? ""}
onLogoutClick={onLogoutClick}
username={data?.name ?? ''}
avatar={data?.picture ?? ''}
onCreateTeamClick={onCreateTeamClick}
onMyGistsClick={onMyGistsClick}
onCreateGistClick={onCreateGistClick}
>
{children}
</GistLayout>
);
)
}
1 change: 0 additions & 1 deletion src/app/(gistLayout)/mygist/page-ui.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { MyGistListFeature } from '@/components/feature/mygist-list-feature'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/shadcn/tooltip'
import HeaderButton from '@/components/ui/header-button'
import MenuButton from '@/components/ui/menu-button'
import { PaginationComponent } from '@/components/ui/pagination'
import Shortcut from '@/components/ui/shortcut'
Expand Down
4 changes: 4 additions & 0 deletions src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@
@apply text-3xl font-semibold;
}

h3 {
@apply text-2xl font-semibold;
}

:-moz-selection {
/* Code for Firefox */
color: #2d1eff;
Expand Down
Loading

0 comments on commit 371b610

Please sign in to comment.