Skip to content

Commit e1f2c81

Browse files
mehdibhamehdibha
committed
fix layout
1 parent 5c8cea5 commit e1f2c81

File tree

13 files changed

+183
-246
lines changed

13 files changed

+183
-246
lines changed

‎www/content/docs/getting-started/guides/dark-mode.mdx

-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ description: Learn how to implement dark mode in your project.
55

66
import { ViteIcon, NextJsIcon, RemixIcon } from "@/components/icons";
77

8-
Learn how to implement dark mode in your project.
9-
108
## Frameworks
119

1210
<Choices

‎www/src/app/(app)/docs/[...slug]/page.tsx

+41-41
Original file line numberDiff line numberDiff line change
@@ -28,50 +28,50 @@ export default async function Page({
2828
const MDXContent = page.data.body;
2929

3030
return (
31-
<div className="container max-w-4xl py-8 lg:py-20 xl:max-w-6xl">
32-
<div
33-
className={cn("", {
34-
"xl:grid xl:grid-cols-[1fr_220px] xl:gap-10":
35-
page.data.toc && page.data.toc.length > 0,
36-
})}
37-
>
38-
<div className="pt-4">
39-
<Breadcrumbs tree={source.pageTree} className="mb-2" />
40-
<h1 className="text-4xl font-bold">{page.data.title}</h1>
41-
<p className="text-fg-muted mt-2">{page.data.description}</p>
42-
{page.data.links && page.data.links.length > 0 && (
43-
<div className="mt-4 flex flex-wrap gap-2">
44-
{page.data.links.map((link, index) => (
45-
<Button
46-
key={index}
47-
href={link.href}
48-
prefix={getIcon(link.href)}
49-
suffix={<ExternalLinkIcon />}
50-
size="sm"
51-
className="h-6 text-xs font-semibold [&_svg]:size-3"
52-
target="_blank"
53-
>
54-
{link.label}
55-
</Button>
56-
))}
57-
</div>
58-
)}
59-
<div className="mt-10 text-sm md:text-base">
60-
<MDXContent components={mdxComponents} />
61-
</div>
62-
<div className="mt-20 space-y-4">
63-
<PageLastUpdate path={page.file.path} />
64-
<DocsPager currentPathname={page.url} />
65-
</div>
66-
</div>
67-
{page.data.toc && page.data.toc.length > 0 && (
68-
<div className="bg-bg z-10 hidden justify-end pt-4 text-sm xl:flex">
69-
<div className="sticky top-8 h-[calc(100svh-calc(var(--spacing)*8))]">
70-
<TableOfContents toc={page.data.toc as TocType} />
71-
</div>
31+
<div
32+
className={cn(
33+
"container w-full max-w-3xl xl:max-w-4xl",
34+
page.data.toc &&
35+
page.data.toc.length > 0 &&
36+
"grid grid-cols-1 gap-10 xl:max-w-5xl xl:grid-cols-[minmax(0,1fr)_minmax(180px,220px)]"
37+
)}
38+
>
39+
<div className="pb-24 pt-4 sm:pt-10 lg:pt-20">
40+
<Breadcrumbs tree={source.pageTree} className="mb-2" />
41+
<h1 className="text-3xl font-bold lg:text-4xl">{page.data.title}</h1>
42+
<p className="text-fg-muted mt-2">{page.data.description}</p>
43+
{page.data.links && page.data.links.length > 0 && (
44+
<div className="mt-4 flex flex-wrap gap-2">
45+
{page.data.links.map((link, index) => (
46+
<Button
47+
key={index}
48+
href={link.href}
49+
prefix={getIcon(link.href)}
50+
suffix={<ExternalLinkIcon />}
51+
size="sm"
52+
className="h-6 text-xs font-semibold [&_svg]:size-3"
53+
target="_blank"
54+
>
55+
{link.label}
56+
</Button>
57+
))}
7258
</div>
7359
)}
60+
<div className="mt-10 text-sm md:text-base">
61+
<MDXContent components={mdxComponents} />
62+
</div>
63+
<div className="mt-20 space-y-4">
64+
<PageLastUpdate path={page.file.path} />
65+
<DocsPager currentPathname={page.url} />
66+
</div>
7467
</div>
68+
{page.data.toc && page.data.toc.length > 0 && (
69+
<div className="pt-20">
70+
<div className="sticky top-10 h-[calc(100svh-calc(var(--spacing)*10))]">
71+
<TableOfContents toc={page.data.toc as TocType} />
72+
</div>
73+
</div>
74+
)}
7575
</div>
7676
);
7777
}

‎www/src/app/(app)/themes/components/preview.tsx

+18-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
"use client";
22

33
import React from "react";
4-
import { ChevronLeftIcon, ChevronRightIcon, RotateCwIcon } from "lucide-react";
4+
import {
5+
ChevronLeftIcon,
6+
ChevronRightIcon,
7+
ChevronsRightIcon,
8+
RotateCwIcon,
9+
} from "lucide-react";
510
import { cn } from "@/lib/utils";
611
import { Button } from "@/components/core/button";
712

8-
export function Preview() {
13+
export function Preview({ setOpen }: { setOpen: (open: boolean) => void }) {
914
const iframeRef = React.useRef<HTMLIFrameElement>(null);
1015
const [iframeIsLoading, setIframeLoading] = React.useState(true);
1116
const [currentPathname, setCurrentPathname] = React.useState("");
@@ -52,8 +57,8 @@ export function Preview() {
5257
}, [updateUrl]);
5358

5459
return (
55-
<div className="bg-bg size-full overflow-hidden border">
56-
<div className="bg-bg-muted flex items-center justify-between gap-2 border-b py-1 pl-4 pr-2">
60+
<div className="bg-bg size-full overflow-hidden rounded-b-md border">
61+
<div className="bg-bg-muted flex items-center justify-between gap-2 border-b px-2 py-1">
5762
<div className="flex w-32 items-center gap-3">
5863
{/* window controls (decorative) */}
5964
{/* <div className="flex items-center gap-1.5">
@@ -62,6 +67,15 @@ export function Preview() {
6267
<div className="size-3 rounded-full border border-field" />
6368
</div> */}
6469
<div className="flex items-center gap-1">
70+
<Button
71+
variant="quiet"
72+
shape="square"
73+
size="sm"
74+
className="size-7"
75+
onPress={() => setOpen(false)}
76+
>
77+
<ChevronsRightIcon />
78+
</Button>
6579
<Button
6680
onPress={goBack}
6781
variant="quiet"

‎www/src/app/(app)/themes/layout.tsx

+6-27
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

33
import React from "react";
4-
import { ChevronsRightIcon } from "lucide-react";
54
import { AnimatePresence, motion } from "motion/react";
65
import { cn } from "@/lib/utils";
76
import { useMounted } from "@/hooks/use-mounted";
@@ -15,28 +14,19 @@ export default function ThemesLayout({
1514
}: {
1615
children: React.ReactNode;
1716
}) {
18-
const [isOpen, setIsOpen] = React.useState(false);
17+
const [isOpen, setOpen] = React.useState(false);
1918
const { isCollapsed } = useSidebarContext();
2019
const isMounted = useMounted();
2120

2221
React.useEffect(() => {
23-
setIsOpen(true);
22+
setOpen(true);
2423
}, []);
2524

2625
return (
2726
<PreviewProvider>
2827
<div className={cn("max-w-screen-3xl relative mx-auto flex")}>
2928
<div className="relative flex-1">
30-
<div className="container max-w-4xl px-0">
31-
<div
32-
className={cn(
33-
"container max-w-none border-x",
34-
isOpen && "border-transparent"
35-
)}
36-
>
37-
{children}
38-
</div>
39-
</div>
29+
<div className={cn("container max-w-3xl")}>{children}</div>
4030
</div>
4131
<div className="relative">
4232
<div className="absolute -left-2 top-2 -translate-x-full">
@@ -51,7 +41,7 @@ export default function ThemesLayout({
5141
<Button
5242
variant="default"
5343
size="sm"
54-
onPress={() => setIsOpen(true)}
44+
onPress={() => setOpen(true)}
5545
className="bg-bg-inverse/5 sticky top-0 border"
5646
>
5747
Preview
@@ -70,20 +60,9 @@ export default function ThemesLayout({
7060
initial={false}
7161
animate={{ width: isCollapsed ? 600 : 500 }}
7262
transition={{ type: "spring", bounce: 0, duration: 0.3 }}
73-
className="h-full"
63+
className="h-full p-4"
7464
>
75-
<div className="bg-bg-muted flex items-center border-x px-2 py-1">
76-
<Button
77-
variant="quiet"
78-
shape="square"
79-
size="sm"
80-
className="size-7"
81-
onPress={() => setIsOpen(false)}
82-
>
83-
<ChevronsRightIcon />
84-
</Button>
85-
</div>
86-
<Preview />
65+
<Preview setOpen={setOpen} />
8766
</motion.div>
8867
</motion.div>
8968
</div>

‎www/src/components/docs/last-update.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { getGithubLastEdit } from "@/lib/docs/get-github-last-edit";
1+
import { getGithubLastEdit } from "@/modules/docs/lib/get-github-last-edit";
22

33
export async function PageLastUpdate({ path }: { path: string }) {
44
try {

‎www/src/components/footer.tsx

+1-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from "react";
22
import NavLink from "next/link";
33
import Link from "next/link";
4-
import { focusRing } from "@/lib/focus-styles";
5-
import { cn } from "@/lib/utils";
64
import { Logo } from "@/components/logo";
75
import { siteConfig } from "@/config";
86

@@ -57,12 +55,7 @@ export const Footer = () => {
5755
<div className="border-t py-12">
5856
<div className="container flex flex-col items-start justify-between gap-10 lg:flex-row">
5957
<div className="space-y-1">
60-
<NavLink href="/" className={cn(focusRing(), "flex gap-2 rounded")}>
61-
<Logo className="translate-y-0.5" />
62-
<div className="font-josefin font-bold tracking-tighter">
63-
dotUI.
64-
</div>
65-
</NavLink>
58+
<Logo />
6659
<p className="text-fg-muted text-base">
6760
Bringing singularity to the web.
6861
</p>

‎www/src/components/header.tsx

+46-47
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function Header({ className }: { className?: string }) {
1919
>
2020
<div className="px-12.5 container relative flex h-14 max-w-screen-2xl items-center justify-between">
2121
<div className="flex items-center gap-6">
22-
<Logo />
22+
{/* <Logo /> */}
2323
<div className="flex items-center gap-3 text-sm">
2424
{[
2525
{ label: "Docs", href: "/docs/getting-started/introduction" },
@@ -66,7 +66,6 @@ export function Header({ className }: { className?: string }) {
6666
>
6767
<TwitterIcon />
6868
</Button>
69-
7069
<ThemeColorsSelector>
7170
<Button variant="quiet" size="sm" shape="square">
7271
<SwatchBookIcon />
@@ -79,48 +78,48 @@ export function Header({ className }: { className?: string }) {
7978
);
8079
}
8180

82-
const Logo = () => {
83-
return (
84-
<Link
85-
href="/"
86-
className="flex items-center gap-2 rounded opacity-100 transition-[opacity,transform] duration-300 ease-out"
87-
>
88-
<svg
89-
xmlns="http://www.w3.org/2000/svg"
90-
width={20}
91-
height={20}
92-
className="rounded-xs"
93-
viewBox="0 0 300 300"
94-
>
95-
<defs>
96-
<clipPath id="a">
97-
<path d="M24 0h252c13.254 0 24 10.746 24 24v252c0 13.254-10.746 24-24 24H24c-13.254 0-24-10.746-24-24V24C0 10.746 10.746 0 24 0Zm0 0" />
98-
</clipPath>
99-
<clipPath id="b">
100-
<path d="M187.5 194.418h66.145v66.144H187.5Zm0 0" />
101-
</clipPath>
102-
<clipPath id="c">
103-
<path d="M220.57 194.418c-18.261 0-33.07 14.809-33.07 33.074 0 18.266 14.809 33.07 33.07 33.07 18.266 0 33.075-14.804 33.075-33.07 0-18.265-14.81-33.074-33.075-33.074Zm0 0" />
104-
</clipPath>
105-
</defs>
106-
<g clipPath="url(#a)">
107-
<path
108-
d="M-30-30h360v360H-30z"
109-
className="fill-[#381e1e] dark:fill-white"
110-
/>
111-
</g>
112-
<g clipPath="url(#b)">
113-
<g clipPath="url(#c)">
114-
<path
115-
d="M187.5 194.418h66.145v66.144H187.5Zm0 0"
116-
className="fill-[#fff] dark:fill-[#381e1e]"
117-
/>
118-
</g>
119-
</g>
120-
</svg>
121-
<div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-[5px] font-bold leading-normal tracking-tighter transition-colors">
122-
{siteConfig.global.name}
123-
</div>
124-
</Link>
125-
);
126-
};
81+
// const Logo = () => {
82+
// return (
83+
// <Link
84+
// href="/"
85+
// className="flex items-center gap-2 rounded opacity-100 transition-[opacity,transform] duration-300 ease-out"
86+
// >
87+
// <svg
88+
// xmlns="http://www.w3.org/2000/svg"
89+
// width={20}
90+
// height={20}
91+
// className="rounded-xs"
92+
// viewBox="0 0 300 300"
93+
// >
94+
// <defs>
95+
// <clipPath id="a">
96+
// <path d="M24 0h252c13.254 0 24 10.746 24 24v252c0 13.254-10.746 24-24 24H24c-13.254 0-24-10.746-24-24V24C0 10.746 10.746 0 24 0Zm0 0" />
97+
// </clipPath>
98+
// <clipPath id="b">
99+
// <path d="M187.5 194.418h66.145v66.144H187.5Zm0 0" />
100+
// </clipPath>
101+
// <clipPath id="c">
102+
// <path d="M220.57 194.418c-18.261 0-33.07 14.809-33.07 33.074 0 18.266 14.809 33.07 33.07 33.07 18.266 0 33.075-14.804 33.075-33.07 0-18.265-14.81-33.074-33.075-33.074Zm0 0" />
103+
// </clipPath>
104+
// </defs>
105+
// <g clipPath="url(#a)">
106+
// <path
107+
// d="M-30-30h360v360H-30z"
108+
// className="fill-[#381e1e] dark:fill-white"
109+
// />
110+
// </g>
111+
// <g clipPath="url(#b)">
112+
// <g clipPath="url(#c)">
113+
// <path
114+
// d="M187.5 194.418h66.145v66.144H187.5Zm0 0"
115+
// className="fill-[#fff] dark:fill-[#381e1e]"
116+
// />
117+
// </g>
118+
// </g>
119+
// </svg>
120+
// <div className="font-josefin group-data-collapsed/sidebar:opacity-0 mt-[5px] text-base font-bold leading-normal tracking-tighter transition-colors">
121+
// {siteConfig.global.name}
122+
// </div>
123+
// </Link>
124+
// );
125+
// };

0 commit comments

Comments
 (0)