Skip to content

Commit 18a7621

Browse files
rob-at-cortexrob-at-cortex
committed
fix: z-indexs
1 parent 91c772b commit 18a7621

5 files changed

Lines changed: 170 additions & 109 deletions

File tree

‎.devcontainer/devcontainer.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"esbenp.prettier-vscode",
2626
"GitHub.copilot-labs",
2727
"GitHub.copilot",
28-
"bradlc.vscode-tailwindcss"
28+
"bradlc.vscode-tailwindcss",
29+
"mutantdino.resourcemonitor"
2930
]
3031
}
3132
}

‎src/components/HeaderFooter/HeaderDesktop.stories.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React, { useState } from 'react';
22
import { Meta, StoryFn } from '@storybook/react';
33
import { HeaderDesktop } from './HeaderDesktop';
44

5+
import logoLight from '@/images/cortex-reply-light.png'
6+
import logoDark from '@/images/cortex-reply-dark.png'
7+
58
export default {
69
title: 'Header/HeaderDesktop',
710
component: HeaderDesktop,
@@ -18,12 +21,14 @@ export default {
1821
} as Meta;
1922

2023
const Template: StoryFn<typeof HeaderDesktop> = (args) => {
21-
const [isMenuOpen, setIsMenuOpen] = useState(args.isMenuOpen);
2224

23-
return <HeaderDesktop {...args} isMenuOpen={isMenuOpen} setIsMenuOpen={setIsMenuOpen} />;
25+
return <HeaderDesktop {...args} />;
2426
};
2527

2628
export const Default = Template.bind({});
2729
Default.args = {
2830
isMenuOpen: true,
31+
logoDark: logoDark,
32+
logoLight: logoLight,
33+
2934
};

‎src/components/Heros/SectionHero/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export interface HeroSectionProps {
1919

2020
export function SectionHero({ title, breadcrumbItems, image = bannerImage.src }: HeroSectionProps) {
2121
return (
22-
<section className="section-padding-primary -mt-[10.4rem] relative flex min-h-[250px] items-end">
22+
<section className="section-padding-primary -z-10 relative flex min-h-[250px] items-end">
2323
{/* Background image */}
2424
<div className="absolute inset-0 z-0">
2525
<Image

‎src/components/Pages/Website.stories.tsx‎

Lines changed: 103 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { fn } from '@storybook/test'
55
import { PhoneIcon, PlayCircleIcon, RectangleGroupIcon } from '@heroicons/react/20/solid'
66
import { ChartPieIcon, CursorArrowRaysIcon, FingerPrintIcon } from '@heroicons/react/24/outline'
77
import { DynamicIcon } from '@/components/Images'
8-
import { Meta, StoryObj } from '@storybook/react';
8+
import { Meta, StoryObj } from '@storybook/react'
99
import pattern1 from '@/images/hero/image-hero1.webp'
1010

1111
const GithubIcon = () => (
@@ -34,8 +34,7 @@ export default {
3434

3535
const Template = (args: any) => <Website {...args} />
3636

37-
38-
type PageStory = StoryObj<typeof Website>;
37+
type PageStory = StoryObj<typeof Website>
3938

4039
export const Default: PageStory = {
4140
render: Template,
@@ -46,7 +45,46 @@ export const Default: PageStory = {
4645
'A scalable object storage service that offers industry-leading performance, security, and availability.',
4746
children: (
4847
<div className="prose max-w-none">
49-
<h2>How it works</h2>
48+
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
49+
<p>
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
51+
ut labore et dolore magna aliqua.
52+
</p>
53+
<div className="aspect-video overflow-hidden rounded-lg bg-slate-100">
54+
<div className="flex h-full items-center justify-center">Video Placeholder</div>
55+
</div>
56+
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
57+
<p>
58+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
59+
ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
60+
Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula, libero a pharetra dictum,
61+
urna lectus porttitor lacus, at dapibus justo quam vel metus. Pellentesque habitant morbi
62+
tristique senectus et netus et malesuada fames ac turpis egestas. Sed non velit nec arcu
63+
volutpat dignissim in a lorem.
64+
</p>
65+
<p>
66+
Proin sagittis sem et elit fringilla, nec fringilla eros maximus. Nulla facilisi. Ut sit
67+
amet facilisis lectus. Fusce ornare metus at ante tristique, nec elementum eros fermentum.
68+
Integer volutpat magna sed justo tincidunt, sit amet aliquam arcu pellentesque. Phasellus
69+
imperdiet mi vitae ligula pharetra, a dignissim velit vehicula.
70+
</p>
71+
<p>
72+
Suspendisse potenti. Donec malesuada arcu at velit laoreet convallis. Sed at eros vel
73+
lacus varius varius nec id metus. Praesent faucibus, orci a varius dapibus, lorem libero
74+
convallis est, et consequat libero magna sit amet risus. Maecenas tincidunt erat et felis
75+
sodales, nec malesuada sem tincidunt. Duis sed nisl euismod, ullamcorper augue at, rutrum
76+
felis.
77+
</p>
78+
<p>
79+
Aenean ut ligula ac libero vehicula luctus. Integer ultricies nisl id mi dictum, eget
80+
tincidunt augue interdum. Sed eu malesuada erat. Nam fringilla lectus id dolor gravida
81+
lacinia. Aliquam erat volutpat. Vestibulum nec ipsum vitae elit dapibus suscipit vel at
82+
ipsum.
83+
</p>
84+
<div className="aspect-video overflow-hidden rounded-lg bg-slate-100">
85+
<div className="flex h-full items-center justify-center">Video Placeholder</div>
86+
</div>
87+
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
5088
<p>
5189
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt
5290
ut labore et dolore magna aliqua.
@@ -312,75 +350,91 @@ export const HighImpactHero = {
312350
...Default.args,
313351
hero: {
314352
type: 'highImpact',
315-
children: (<div class="max-w-none mx-auto prose dark:prose-invert mb-6"><h1 class="col-start-2">High Impact Hero</h1><p class="col-start-2"></p><p class="col-start-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula, libero a pharetra dictum, urna lectus porttitor lacus, at dapibus justo quam vel metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non velit nec arcu volutpat dignissim in a lorem.</p><p class="col-start-2"></p><p class="col-start-2">Proin sagittis sem et elit fringilla, nec fringilla eros maximus. Nulla facilisi. Ut sit amet facilisis lectus. Fusce ornare metus at ante tristique, nec elementum eros fermentum. Integer volutpat magna sed justo tincidunt, sit amet aliquam arcu pellentesque. Phasellus imperdiet mi vitae ligula pharetra, a dignissim velit vehicula.</p></div>),
353+
children: (
354+
<div class="max-w-none mx-auto prose dark:prose-invert mb-6">
355+
<h1 class="col-start-2">High Impact Hero</h1>
356+
<p class="col-start-2"></p>
357+
<p class="col-start-2">
358+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae
359+
vestibulum vestibulum. Cras vehicula, libero a pharetra dictum, urna lectus porttitor
360+
lacus, at dapibus justo quam vel metus. Pellentesque habitant morbi tristique senectus
361+
et netus et malesuada fames ac turpis egestas. Sed non velit nec arcu volutpat dignissim
362+
in a lorem.
363+
</p>
364+
<p class="col-start-2"></p>
365+
<p class="col-start-2">
366+
Proin sagittis sem et elit fringilla, nec fringilla eros maximus. Nulla facilisi. Ut sit
367+
amet facilisis lectus. Fusce ornare metus at ante tristique, nec elementum eros
368+
fermentum. Integer volutpat magna sed justo tincidunt, sit amet aliquam arcu
369+
pellentesque. Phasellus imperdiet mi vitae ligula pharetra, a dignissim velit vehicula.
370+
</p>
371+
</div>
372+
),
316373
media: 'stock1.jpg?height=400&width=800',
317374
},
318375
media: 'stock1.jpg?height=400&width=800',
319376
},
320377
}
321378

322-
323379
export const PostHero = {
324380
args: {
325381
...Default.args,
326382
hero: {
327383
type: 'postHero',
328384
post: {
329385
id: '1',
330-
title: 'Sample Post Title',
331-
categories: [
332-
{ id: '1', title: 'Category 1' },
333-
{ id: '2', title: 'Category 2' },
334-
],
335-
meta: {
336-
image: 'stock1.jpg',
337-
},
338-
populatedAuthors: [
339-
{
340-
id: '1',
341-
name: 'Author 1',
342-
avatar: {
343-
id: '1',
344-
url: '/path/to/avatar1.jpg',
345-
alt: 'Author 1 Avatar',
346-
},
347-
},
348-
{
349-
id: '2',
350-
name: 'Author 2',
351-
avatar: {
352-
id: '2',
353-
url: '/path/to/avatar2.jpg',
354-
alt: 'Author 2 Avatar',
386+
title: 'Sample Post Title',
387+
categories: [
388+
{ id: '1', title: 'Category 1' },
389+
{ id: '2', title: 'Category 2' },
390+
],
391+
meta: {
392+
image: 'stock1.jpg',
393+
},
394+
populatedAuthors: [
395+
{
396+
id: '1',
397+
name: 'Author 1',
398+
avatar: {
399+
id: '1',
400+
url: '/path/to/avatar1.jpg',
401+
alt: 'Author 1 Avatar',
402+
},
403+
},
404+
{
405+
id: '2',
406+
name: 'Author 2',
407+
avatar: {
408+
id: '2',
409+
url: '/path/to/avatar2.jpg',
410+
alt: 'Author 2 Avatar',
411+
},
412+
},
413+
],
414+
publishedAt: '2023-10-01T12:00:00Z',
415+
content: 'Sample post content...',
355416
},
356417
},
357-
],
358-
publishedAt: '2023-10-01T12:00:00Z',
359-
content: 'Sample post content...',
360-
}
361-
},
362418
media: 'stock1.jpg?height=400&width=800',
363419
},
364420
}
365421

366-
367422
export const SectionHero = {
368423
args: {
369424
...Default.args,
370425
hero: {
371426
type: 'sectionHero',
372427
image: pattern1,
373-
title: "Services",
374-
breadcrumbItems: [
375-
{
376-
label: 'Home',
377-
href: '/',
378-
},
379-
{
380-
label: 'Service',
381-
},
382-
]
383-
428+
title: 'Services',
429+
breadcrumbItems: [
430+
{
431+
label: 'Home',
432+
href: '/',
433+
},
434+
{
435+
label: 'Service',
436+
},
437+
],
384438
},
385439
},
386-
}
440+
}

‎src/components/Pages/Website.tsx‎

Lines changed: 57 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -87,72 +87,73 @@ export default function WebsiteSection({ ...args }) {
8787
return (
8888

8989
<div className="flex fixed flex-col w-screen h-screen max-h-screen overflow-auto overscroll-contain">
90-
<HeaderDesktop isMenuOpen={true} logoLight={logoLight} logoDark={logoDark} />
90+
<div className="fixed top-0 left-0 right-0 z-50">
9191

92+
<HeaderDesktop isMenuOpen={true} logoLight={logoLight} logoDark={logoDark} />
93+
</div>
9294

9395
{/* Hero Section */}
9496
{args.hero && args.hero.type === 'lowImpact' && <LowImpactHero {...args.hero} />}
9597
{args.hero && args.hero.type === 'mediumImpact' && <MediumImpactHero {...args.hero} />}
9698
{args.hero && args.hero.type === 'highImpact' && <HighImpactHero {...args.hero} />}
9799
{args.hero && args.hero.type === 'postHero' && <PostHero {...args.hero} />}
98-
{/* {args.hero && args.hero.type === 'sectionHero' && <SectionHero {...args.hero} />} */}
99-
100-
{/* <div className="relative bg-brand-one pb-12 pt-10">
101-
{args.heroBackgroundImage && (
102-
<Image
103-
src={args.heroBackgroundImage}
104-
alt="Hero background"
105-
layout="fill"
106-
objectFit="cover"
107-
className="mix-blend-overlay opacity-50"
108-
/>
109-
)}
110-
<div className="container relative z-10">
111-
<div className="text-slate-400">{args.section}</div>
112-
<h1 className="mt-2 text-4xl font-bold text-white">{args.title}</h1>
113-
<p className="mt-4 max-w-3xl text-slate-400">{args.description}</p>
114-
</div>
115-
</div> */}
100+
{args.hero && args.hero.type === 'sectionHero' && <SectionHero {...args.hero} />}
116101

117102
{/* Main Content */}
103+
<div className="container py-8">
104+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
105+
{/* Main Content Area */}
106+
<div className="lg:col-span-2">{args.children}</div>
118107

119-
{/* <SidebarProvider className="top-14 mb-4 h-full max-h-[calc(100vh-3.5rem)] flex-1 flex-row overflow-y-clip">
120-
<SidebarLeft {...args.sidebarLeft} className="flex-none" />
121-
<SidebarInset className="grow overflow-hidden">
122-
<header className="flex h-16 shrink-0 items-center gap-2">
123-
<div className="flex items-center gap-2 px-4">
124-
<SidebarTrigger className="-ml-1" />
125-
<Separator orientation="vertical" className="mr-2 h-4" />
126-
<Breadcrumb>
127-
<BreadcrumbList>
128-
<BreadcrumbItem className="hidden md:block">
129-
<BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
130-
</BreadcrumbItem>
131-
<BreadcrumbSeparator className="hidden md:block" />
132-
<BreadcrumbItem>
133-
<BreadcrumbPage>Data Fetching</BreadcrumbPage>
134-
</BreadcrumbItem>
135-
</BreadcrumbList>
136-
</Breadcrumb>
137-
</div>
138-
</header>
139-
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
140-
<div className="grid auto-rows-min gap-4 md:grid-cols-3">
141-
<div className="aspect-video rounded-xl bg-muted/50" />
142-
<div className="aspect-video rounded-xl bg-muted/50" />
143-
<div className="aspect-video rounded-xl bg-muted/50" />
144-
</div>
145-
<div className="flex-1 rounded-xl bg-muted/50 md:min-h-min" />
146-
</div>
147-
</SidebarInset>
148-
<SidebarRight
149-
{...args.sidebarRight}
150-
editorComponent={<GithubControl {...args.github} />}
151-
className="flex-none"
152-
/>
153-
</SidebarProvider>
154-
<Toaster /> */}
108+
{/* Sidebar */}
109+
<div className="space-y-6">
110+
<Card>
111+
<CardHeader>
112+
<CardTitle>Quick Actions</CardTitle>
113+
</CardHeader>
114+
<CardContent>
115+
<p className="mb-4 text-sm text-muted-foreground">
116+
Get started with your first action in just a few clicks.
117+
</p>
118+
<Button className="w-full">Create New</Button>
119+
</CardContent>
120+
</Card>
121+
122+
<Card>
123+
<CardHeader>
124+
<CardTitle>Resources</CardTitle>
125+
</CardHeader>
126+
<CardContent>
127+
<nav className="flex flex-col space-y-2">
128+
<a
129+
href="#"
130+
className="inline-flex items-center text-sm text-blue-600 hover:underline"
131+
>
132+
User Guide
133+
<ExternalLink className="ml-1 h-3 w-3" />
134+
</a>
135+
<a
136+
href="#"
137+
className="inline-flex items-center text-sm text-blue-600 hover:underline"
138+
>
139+
API Documentation
140+
<ExternalLink className="ml-1 h-3 w-3" />
141+
</a>
142+
<a
143+
href="#"
144+
className="inline-flex items-center text-sm text-blue-600 hover:underline"
145+
>
146+
View Pricing Details
147+
<ExternalLink className="ml-1 h-3 w-3" />
148+
</a>
149+
</nav>
150+
</CardContent>
151+
</Card>
152+
</div>
153+
</div>
154+
</div>
155+
</div>
155156

156-
</div>
157+
157158
)
158159
}

0 commit comments

Comments
 (0)