-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update settings pages/navs and add animations
- Loading branch information
1 parent
833749e
commit 8d28d78
Showing
16 changed files
with
316 additions
and
330 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 0 additions & 121 deletions
121
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout-client.tsx
This file was deleted.
Oops, something went wrong.
6 changes: 2 additions & 4 deletions
6
apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,10 @@ | ||
| import { ReactNode } from "react"; | ||
| import WorkspaceSettingsLayoutClient from "./layout-client"; | ||
| import SettingsLayout from "../../../../../ui/layout/settings-layout"; | ||
|
|
||
| export default function WorkspaceSettingsLayout({ | ||
| children, | ||
| }: { | ||
| children: ReactNode; | ||
| }) { | ||
| return ( | ||
| <WorkspaceSettingsLayoutClient>{children}</WorkspaceSettingsLayoutClient> | ||
| ); | ||
| return <SettingsLayout>{children}</SettingsLayout>; | ||
| } |
30 changes: 1 addition & 29 deletions
30
apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,10 @@ | ||
| import SettingsLayout from "@/ui/layout/settings-layout"; | ||
| import { Gear2, Key, ShieldCheck } from "@dub/ui"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| export default function PersonalSettingsLayout({ | ||
| children, | ||
| }: { | ||
| children: ReactNode; | ||
| }) { | ||
| const tabs = [ | ||
| { | ||
| group: "", | ||
| tabs: [ | ||
| { | ||
| name: "General", | ||
| icon: Gear2, | ||
| segment: null, | ||
| }, | ||
| { | ||
| name: "Security", | ||
| icon: ShieldCheck, | ||
| segment: "security", | ||
| }, | ||
| { | ||
| name: "API Keys", | ||
| icon: Key, | ||
| segment: "tokens", | ||
| }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <SettingsLayout tabs={tabs} tabContainerClassName="top-[105px]"> | ||
| {children} | ||
| </SettingsLayout> | ||
| ); | ||
| return <SettingsLayout>{children}</SettingsLayout>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,15 @@ | ||
| import { Icon, MaxWidthWrapper } from "@dub/ui"; | ||
| import { cn } from "@dub/utils"; | ||
| import { ReactNode } from "react"; | ||
| import NavLink from "./settings-nav-link"; | ||
| import { SettingsNavMobile } from "./settings-nav-mobile"; | ||
| import { MaxWidthWrapper } from "@dub/ui"; | ||
| import { PropsWithChildren } from "react"; | ||
| import { PageContent } from "./page-content"; | ||
|
|
||
| interface Tab { | ||
| name: string; | ||
| icon: Icon; | ||
| segment: string | null; | ||
| } | ||
|
|
||
| export interface SettingsLayoutProps { | ||
| tabs: { | ||
| group: string; | ||
| tabs: Tab[]; | ||
| }[]; | ||
| tabContainerClassName?: string; | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| export default function SettingsLayout({ | ||
| tabs, | ||
| tabContainerClassName, | ||
| children, | ||
| }: SettingsLayoutProps) { | ||
| export default function SettingsLayout({ children }: PropsWithChildren) { | ||
| return ( | ||
| <div className="relative min-h-[calc(100vh-16px)] bg-white"> | ||
| <MaxWidthWrapper className="grid items-start gap-8 py-10 lg:grid-cols-5"> | ||
| <div className="lg:hidden"> | ||
| <SettingsNavMobile tabs={tabs}> | ||
| <Tabs tabs={tabs} /> | ||
| </SettingsNavMobile> | ||
| </div> | ||
| <div | ||
| className={cn( | ||
| "hidden flex-wrap gap-4 lg:sticky lg:flex lg:grid", | ||
| tabContainerClassName, | ||
| )} | ||
| > | ||
| <Tabs tabs={tabs} /> | ||
| </div> | ||
| <div className="grid gap-5 lg:col-span-4">{children}</div> | ||
| </MaxWidthWrapper> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function Tabs({ tabs }: Pick<SettingsLayoutProps, "tabs">) { | ||
| return ( | ||
| <> | ||
| {tabs.map(({ group, tabs }) => ( | ||
| <div key={group} className="flex flex-col gap-y-0.5"> | ||
| {group && ( | ||
| <span className="pb-1.5 text-sm text-gray-500">{group}</span> | ||
| )} | ||
|
|
||
| {tabs.map(({ name, icon, segment }) => ( | ||
| <NavLink key={name} segment={segment} icon={icon}> | ||
| {name} | ||
| </NavLink> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| </> | ||
| <PageContent title=""> | ||
| <div className="relative min-h-[calc(100vh-16px)]"> | ||
| <MaxWidthWrapper className="pb-10 pt-3"> | ||
| <div className="grid gap-5">{children}</div> | ||
| </MaxWidthWrapper> | ||
| </div> | ||
| </PageContent> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.