Skip to content

Commit 154f0c1

Browse files
naymurdevnaymurdev
committed
feat: fix responsive header issues and add UI-Layouts Pro banner
1 parent 9b3f988 commit 154f0c1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+7206
-3119
lines changed

‎app/(docs-page)/components/[...slug]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ export default async function DocPage(
5252

5353
return (
5454
<>
55-
<div className='container mx-auto '>
55+
<div className='lg:container mx-auto lg:px-0 px-2'>
5656
<div className='flex w-full lg:gap-3'>
57-
<section className='xl:mr-0 mr-3 mt-[4.34rem] prose w-full prose-zinc min-w-0 max-w-full pb-5 pt-4 dark:prose-invert prose-h1:text-2xl prose-h1:font-semibold prose-h2:text-2xl prose-h2:my-4 prose-h2:py-1 prose-h2:border-b prose-h3:py-1 prose-h2:mt-3 prose-h2:font-medium prose-h3:text-2xl prose-h3:mt-4 prose-h3:mb-2 prose-h3:font-medium prose-strong:font-medium prose-table:block prose-table:overflow-y-auto lg:pt-4'>
57+
<section className='xl:mr-0 lg:mr-3 mt-2 prose w-full prose-zinc min-w-0 max-w-full pb-5 dark:prose-invert prose-h1:text-2xl prose-h1:font-semibold prose-h2:text-2xl prose-h2:my-4 prose-h2:py-1 prose-h2:border-b prose-h3:py-1 prose-h2:mt-3 prose-h2:font-medium prose-h3:text-2xl prose-h3:mt-4 prose-h3:mb-2 prose-h3:font-medium prose-strong:font-medium prose-table:block prose-table:overflow-y-auto lg:pt-1'>
5858
<article className='mb-4 mt-0 rounded-lg dark:bg-black/40 bg-primary-foreground border backdrop-blur-md p-6'>
5959
<div className='space-y-2 rounded-md dark:text-white text-black'>
6060
<h1

‎app/(docs-page)/components/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default function Home() {
1212
return (
1313
<>
1414
<CanvasCursor />
15-
<div className='pt-[5.4rem] pb-5'>
15+
<div className='pt-4 pb-5'>
1616
<h1
1717
className={'sm:text-3xl text-2xl font-semibold tracking-tight pb-1'}
1818
>

‎app/(docs-page)/get-started/page.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ export const metadata = {
22
title: 'Get Started',
33
};
44

5-
<div className='mt-[5.5rem]'>
5+
<div className='mt-4'>
66
<h4 className='text-4xl font-semibold'>Introdcution</h4>
77
</div>
88

‎app/(docs-page)/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export default async function ComponentLayout({
1313
<main className='dark:bg-zinc-950 bg-zinc-50 '>
1414
<div className='mx-auto xl:container xl:px-0 px-2 lg:grid 2xl:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[200px_minmax(0,1fr)] lg:gap-3'>
1515
<DocsSidebar />
16-
<div className=' min-w-0 max-w-full'>{children}</div>
16+
<div className='min-w-0 max-w-full'>{children}</div>
1717
</div>
1818
</main>
1919
</>

‎app/globals.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,74 @@ body {
162162
-webkit-text-fill-color: transparent;
163163
}
164164
}
165+
166+
@layer utilities {
167+
.rainbow-banner-gradient-1 {
168+
mask-image:
169+
linear-gradient(to bottom, white, transparent),
170+
radial-gradient(circle at top center, white, transparent);
171+
mask-composite: intersect;
172+
animation: moving-banner 16s linear infinite reverse;
173+
--start: rgba(0, 87, 255, 0.5);
174+
--mid: rgba(255, 0, 166, 0.77);
175+
--end: rgba(255, 77, 0, 0.4);
176+
--via: rgba(164, 255, 68, 0.4);
177+
background-image: repeating-linear-gradient(
178+
60deg,
179+
var(--end),
180+
var(--start) 2%,
181+
var(--start) 5%,
182+
transparent 8%,
183+
transparent 14%,
184+
var(--via) 18%,
185+
var(--via) 22%,
186+
var(--mid) 28%,
187+
var(--mid) 30%,
188+
var(--via) 34%,
189+
var(--via) 36%,
190+
transparent,
191+
var(--end) calc(50% - 12px)
192+
);
193+
background-size: 200% 100%;
194+
mix-blend-mode: difference;
195+
}
196+
197+
.rainbow-banner-gradient-2 {
198+
mask-image:
199+
linear-gradient(to bottom, white, transparent),
200+
radial-gradient(circle at top center, white, transparent);
201+
mask-composite: intersect;
202+
animation: moving-banner 20s linear infinite;
203+
--start: rgba(255, 120, 120, 0.5);
204+
--mid: rgba(36, 188, 255, 0.4);
205+
--end: rgba(64, 0, 255, 0.51);
206+
--via: rgba(255, 89, 0, 0.56);
207+
background-image: repeating-linear-gradient(
208+
45deg,
209+
var(--end),
210+
var(--start) 4%,
211+
var(--start) 8%,
212+
transparent 9%,
213+
transparent 14%,
214+
var(--mid) 16%,
215+
var(--mid) 20%,
216+
transparent,
217+
var(--via) 36%,
218+
var(--via) 40%,
219+
transparent 42%,
220+
var(--end) 46%,
221+
var(--end) calc(50% - 16.8px)
222+
);
223+
background-size: 200% 100%;
224+
mix-blend-mode: color-dodge;
225+
}
226+
}
227+
228+
@keyframes moving-banner {
229+
from { background-position: 0 0; }
230+
to { background-position: 200% 0; }
231+
}
232+
165233
html {
166234
-webkit-tap-highlight-color: transparent;
167235
scrollbar-gutter: stable;

‎app/layout.tsx‎

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { ThemeProvider } from '@/components/website/theme-provider';
66
import { GeistMono } from 'geist/font/mono';
77
import Progressbar from '@/lib/progressbar';
88
import { siteConfig } from '@/lib/utils';
9+
import { Banner } from '@/components/website/ui/banner';
10+
import { ArrowUpRight } from 'lucide-react';
911

1012
const poppins = Poppins({
1113
subsets: ['latin'],
@@ -80,24 +82,62 @@ export default async function RootLayout({
8082
return (
8183
<>
8284
<html lang='en' suppressHydrationWarning>
83-
<head>
84-
<Script
85-
async
86-
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
87-
/>
88-
<Script id="google-analytics">
89-
{`
85+
<head>
86+
<Script
87+
async
88+
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}
89+
/>
90+
<Script id='google-analytics'>
91+
{`
9092
window.dataLayer = window.dataLayer || [];
9193
function gtag(){dataLayer.push(arguments);}
9294
gtag('js', new Date());
9395
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}');
9496
`}
95-
</Script>
96-
</head>
97+
</Script>
98+
</head>
9799
<body className={poppins.className}>
98100
<Progressbar>
99101
<ThemeProvider attribute='class'>
100-
{children}
102+
<a
103+
href={'https://pro.ui-layouts.com'}
104+
target='_blank'
105+
className='block group w-full relative'
106+
>
107+
<Banner
108+
variant='rainbow'
109+
className='h-11 md:text-base sm:text-sm text-xs'
110+
>
111+
<p className='group-hover:underline underline-offset-4 flex flex-wrap gap-1 items-center'>
112+
<picture>
113+
<source
114+
srcSet='https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp'
115+
type='image/webp'
116+
/>
117+
<img
118+
src='https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif'
119+
alt='🚀'
120+
className='w-6 h-6'
121+
width='32'
122+
height='32'
123+
/>
124+
</picture>
125+
Ship faster with{' '}
126+
<span className='font-semibold'>UI-Layouts Pro</span>
127+
<span className='lg:inline-block hidden'>
128+
– 50+ Tailwind & React components for production-ready UIs
129+
</span>
130+
<span className='lg:hidden sm:inline-block hidden'>
131+
– 50+ battle-tested components.
132+
</span>
133+
</p>
134+
<ArrowUpRight
135+
className='size-5 ml-1 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all duration-200 ease-out shrink-0'
136+
strokeWidth={2}
137+
/>
138+
</Banner>
139+
</a>
140+
{children}
101141
</ThemeProvider>
102142
</Progressbar>
103143
</body>

‎components/website/code-components/component-code-preview.tsx‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
21
import docs from '@/configs/docs.json';
32

43
import ComponentPreview from './component-preview';
54
import { extractCodeFromFilePath } from '@/lib/code';
65
import React from 'react';
76
import { Code, Eye } from 'lucide-react';
87
import { PreCoded } from './pre-coded';
8+
import { cn } from '@/lib/utils';
99

1010
type ComponentCodePreview = {
1111
component: React.ReactElement<any>;
@@ -16,6 +16,7 @@ type ComponentCodePreview = {
1616
isTab?: boolean;
1717
isFitheight?: boolean;
1818
isNotCopy?: boolean;
19+
type?: string;
1920
};
2021
export type TCurrComponentProps = {
2122
componentName: string;
@@ -32,6 +33,7 @@ export default async function ComponentCodePreview({
3233
name,
3334
responsive,
3435
isNotCopy = true,
36+
type,
3537
}: ComponentCodePreview) {
3638
const currComponent: TCurrComponentProps | null =
3739
docs.dataArray.reduce<TCurrComponentProps | null>((acc, component) => {
@@ -58,20 +60,30 @@ export default async function ComponentCodePreview({
5860
// console.log(fileContent);
5961

6062
return (
61-
<div
62-
className='not-prose relative z-0 md:grid grid-cols-2 pb-3 border
63-
w-full rounded-lg dark:bg-[#080b11] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:20px_20px] overflow-hidden
64-
'
65-
>
66-
<ComponentPreview
67-
hasReTrigger={hasReTrigger}
68-
component={currComponent}
69-
code={fileContent}
70-
responsive={responsive}
71-
isNotCopy={isNotCopy}
72-
/>
63+
<>
64+
<div
65+
className={cn(
66+
'not-prose relative z-0 md:grid grid-cols-2 pb-3 border w-full rounded-lg dark:bg-[#080b11] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:20px_20px] overflow-hidden',
67+
type === 'separate' && 'xl:h-[34rem] h-[30rem]'
68+
)}
69+
>
70+
<ComponentPreview
71+
hasReTrigger={hasReTrigger}
72+
component={currComponent}
73+
code={fileContent}
74+
responsive={responsive}
75+
isNotCopy={isNotCopy}
76+
type={type}
77+
/>
78+
79+
{type !== 'separate' && <PreCoded codeblock={fileContent} />}
80+
</div>
7381

74-
<PreCoded codeblock={fileContent} />
75-
</div>
82+
{type === 'separate' && (
83+
<div className='not-prose relative z-0 w-full rounded-lg dark:bg-[#080b11] overflow-hidden mt-5 p-0'>
84+
<PreCoded type={type} codeblock={fileContent} classname='p-0' tabclassname="right-16 top-4" copyclass="right-5 top-4" />
85+
</div>
86+
)}
87+
</>
7688
);
7789
}

‎components/website/code-components/component-preview.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Check, Copy, RotateCw } from 'lucide-react';
44
import React, { useState, useEffect } from 'react';
55
import { TCurrComponentProps } from './component-code-preview';
66
import { AllComponens } from '@/configs/docs';
7+
import { cn } from '@/lib/utils';
78

89
type ComponentPreviewProps = {
910
component?: TCurrComponentProps;
@@ -12,6 +13,7 @@ type ComponentPreviewProps = {
1213
code: string;
1314
responsive?: boolean;
1415
isNotCopy?: boolean;
16+
type?: string;
1517
};
1618
type DynamicComponentType = React.ComponentType<any>;
1719

@@ -22,6 +24,7 @@ export default function ComponentPreview({
2224
code,
2325
responsive,
2426
isNotCopy,
27+
type
2528
}: ComponentPreviewProps) {
2629
const [reTriggerKey, setReTriggerKey] = useState<number>(0);
2730
const [hasCheckIcon, setHasCheckIcon] = useState(false);
@@ -49,7 +52,7 @@ export default function ComponentPreview({
4952

5053
return (
5154
<>
52-
<div className='absolute right-10 top-7 z-[10] flex h-12 items-center gap-2'>
55+
<div className={cn('absolute right-10 top-7 z-[10] flex h-12 items-center gap-2',type === "separate" && 'right-4 top-4')}>
5356
{!isNotCopy && (
5457
<button
5558
className='relative grid cursor-pointer place-content-center rounded-lg border bg-background p-2 px-2.5'

‎components/website/code-components/pre-coded.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ export async function PreCoded({
1616
classname,
1717
tabclassname,
1818
copyclass,
19+
type,
1920
}: {
2021
codeblock: string;
2122
classname?: string;
2223
tabclassname?: string;
2324
copyclass?: string;
25+
type?: string;
2426
}) {
2527
const result = ts.transpileModule(codeblock, {
2628
compilerOptions: {
@@ -75,13 +77,17 @@ export async function PreCoded({
7577
Js{' '}
7678
</TabsTrigger>
7779
</TabsList>
78-
<TabsContent value={'typescript'}>
80+
<TabsContent value={'typescript'} className='bg-transparent'>
7981
<div className={cn('relative p-4 ', classname)}>
8082
<CopyButton
8183
code={tshighlighted.code}
82-
classname={cn('top-[1.58rem] right-[5.1em] ', copyclass)}
84+
classname={cn('top-[1.58rem] right-[5.1em]', copyclass)}
8385
/>
84-
<div className=' p-2 max-h-[500px] pt-8 overflow-x-hidden rounded-md text-sm bg-codebg border'>
86+
<div
87+
className={cn(
88+
'p-2 max-h-[500px] pt-8 overflow-x-hidden rounded-md text-sm bg-codebg border',
89+
)}
90+
>
8591
<Pre
8692
code={tshighlighted}
8793
handlers={[callout, wordWrap, lineNumbers]}
@@ -90,13 +96,17 @@ export async function PreCoded({
9096
</div>
9197
</div>
9298
</TabsContent>
93-
<TabsContent value={'javascript'}>
99+
<TabsContent value={'javascript'} className='bg-transparent'>
94100
<div className={cn('relative p-4', classname)}>
95101
<CopyButton
96102
code={jshighlighted.code}
97-
classname={cn('top-[1.58rem] right-[5.1em] ', copyclass)}
103+
classname={cn('top-[1.58rem] right-[5.1em]', copyclass)}
98104
/>
99-
<div className='p-2 max-h-[500px] overflow-x-hidden pt-8 rounded-md text-sm bg-codebg border'>
105+
<div
106+
className={cn(
107+
'p-2 max-h-[500px] overflow-x-hidden pt-8 rounded-md text-sm bg-codebg border'
108+
)}
109+
>
100110
<Pre
101111
code={jshighlighted}
102112
handlers={[callout, wordWrap, lineNumbers]}

0 commit comments

Comments
 (0)