Skip to content

Commit c70066f

Browse files
fluid-design-iofluid-design-io
committed
Release version 1.1.0
1 parent 6cde853 commit c70066f

30 files changed

+1544
-218
lines changed

‎CHANGELOG.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,34 @@
11
# vision-pro-ui
22

3+
## 1.1.0
4+
5+
### Minor Changes
6+
7+
- - Added new constants for window properties.
8+
- Introduced MemoriesView and AppStorePage components.
9+
- Enhanced landing page with new navigation and layout features.
10+
- Improved animations and transitions in various components.
11+
12+
## 1.0.2
13+
14+
### Patch Changes
15+
16+
- add apps and navigation, refined components & animations
17+
18+
## 1.0.1
19+
20+
### Patch Changes
21+
22+
- f159553: Converted honeycomb layout to use context value instead of prop drilling. Optimized components
23+
24+
## 1.0.0
25+
26+
### Major Changes
27+
28+
- 0a0b87f: - Brand new landing page
29+
- Brand new VisionOS honeycomb home layout (mobile compatible)
30+
- Optimized few components
31+
332
## 0.1.7
433

534
### Patch Changes

‎app/(landing)/constants.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { WindowProps } from "@/components/core/window";
2+
3+
export const defaultWindowClassName =
4+
"h-[600px] min-h-[400px] w-[calc(min(85vw,1024px))]";
5+
export const defaultWindowProps: Partial<WindowProps> = {
6+
scroll: true,
7+
initial: {
8+
opacity: 0,
9+
},
10+
animate: {
11+
opacity: 1,
12+
},
13+
transition: {
14+
duration: 0.35,
15+
},
16+
className: defaultWindowClassName,
17+
controls: true,
18+
};

‎app/(landing)/layout.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { HeroBackground } from "@/components/landing/hero-background";
2+
import { Cursor } from "@/components/core/cursor";
3+
4+
function LandingLayout({ children }: { children: React.ReactNode }) {
5+
return (
6+
<>
7+
<Cursor />
8+
<HeroBackground>{children}</HeroBackground>
9+
</>
10+
);
11+
}
12+
13+
export default LandingLayout;

‎app/(landing)/page.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import {
2+
Ornament,
3+
OrnamentContentBase,
4+
OrnamentContents,
5+
OrnamentTab,
6+
OrnamentTabs,
7+
} from "@/components/core/ornament";
8+
import { AppStoreIcon, EnvironmentsIcon, PeopleIcon } from "@/components/icons";
9+
import HomeView from "@/components/landing/home-view";
10+
import { Text } from "@/components/ui/typography";
11+
12+
export const dynamic = "force-dynamic";
13+
14+
function LandingPage() {
15+
return (
16+
<Ornament defaultTab="apps">
17+
<OrnamentContents>
18+
<OrnamentContentBase value="apps" key="apps">
19+
<HomeView />
20+
</OrnamentContentBase>
21+
<OrnamentContentBase value="people" key="people">
22+
<div className="text-center">
23+
<Text variant="secondary" size="XLTitle2">
24+
Coming Soon...
25+
</Text>
26+
</div>
27+
</OrnamentContentBase>
28+
<OrnamentContentBase value="environments" key="environments">
29+
<div className="text-center">
30+
<Text variant="secondary" size="XLTitle2">
31+
Stay tuned...
32+
</Text>
33+
</div>
34+
</OrnamentContentBase>
35+
</OrnamentContents>
36+
<OrnamentTabs>
37+
<OrnamentTab
38+
icon={<AppStoreIcon className="size-6" data-slot="icon" />}
39+
label="Apps"
40+
value="apps"
41+
/>
42+
<OrnamentTab
43+
icon={<PeopleIcon className="size-6" data-slot="icon" />}
44+
label="People"
45+
value="people"
46+
/>
47+
<OrnamentTab
48+
icon={<EnvironmentsIcon className="size-6" data-slot="icon" />}
49+
label="Environments"
50+
value="environments"
51+
/>
52+
</OrnamentTabs>
53+
</Ornament>
54+
);
55+
}
56+
57+
export default LandingPage;

components/landing/memories-view.tsx renamed to app/(landing)/photos/memories-view.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
"use client";
22

3-
import { NavigationBar, NavigationBarTitle } from "../core/navigation-bar";
4-
import { Button, ButtonGroup } from "../core/button";
5-
import { HeroDropdownMenu } from "./hero-dropdown-menu";
3+
import {
4+
NavigationBar,
5+
NavigationBarTitle,
6+
} from "../../../components/core/navigation-bar";
7+
import { Button, ButtonGroup } from "../../../components/core/button";
8+
import { HeroDropdownMenu } from "../../../components/landing/hero-dropdown-menu";
69
import Image from "next/image";
710

8-
import { Text } from "../ui/typography";
11+
import { Text } from "../../../components/ui/typography";
912

1013
import forest from "@/public/assets/demo/forest.avif";
11-
import { AspectRatio } from "../ui/aspect-ratio";
12-
import { Toolbar } from "../core/toolbar";
14+
import { AspectRatio } from "../../../components/ui/aspect-ratio";
15+
import { Toolbar } from "../../../components/core/toolbar";
1316
import { useState } from "react";
1417

1518
// const memories = [

‎app/(landing)/photos/page.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {
2+
Ornament,
3+
OrnamentContent,
4+
OrnamentContents,
5+
OrnamentTab,
6+
OrnamentTabs,
7+
} from "@/components/core/ornament";
8+
import { MemoriesToolbar, MemoriesView } from "./memories-view";
9+
import { IconPhotoFilled } from "@tabler/icons-react";
10+
import { PencilRulerIcon, Settings } from "lucide-react";
11+
import { cn } from "@/lib/utils";
12+
import { defaultWindowProps } from "../constants";
13+
import {
14+
NavigationBar,
15+
NavigationBarTitle,
16+
} from "@/components/core/navigation-bar";
17+
import { ButtonGroup } from "@/components/core/button";
18+
import { HeroDropdownMenu } from "@/components/landing/hero-dropdown-menu";
19+
20+
function PhotosPage() {
21+
return (
22+
<Ornament defaultTab="memories">
23+
<OrnamentContents contentClassName={cn("h-[32vw] max-h-[640px]")}>
24+
<OrnamentContent
25+
{...defaultWindowProps}
26+
value="memories"
27+
key="memories"
28+
FooterComponent={MemoriesToolbar}
29+
rootClassName="[--window-controls-bottom:-80px]"
30+
>
31+
<MemoriesView />
32+
</OrnamentContent>
33+
<OrnamentContent
34+
value="collections"
35+
key="collections"
36+
{...defaultWindowProps}
37+
>
38+
<NavigationBar>
39+
<div />
40+
<NavigationBarTitle>Collections</NavigationBarTitle>
41+
<ButtonGroup>
42+
<HeroDropdownMenu />
43+
</ButtonGroup>
44+
</NavigationBar>
45+
<div className="h-[600px]" />
46+
</OrnamentContent>
47+
<OrnamentContent value="spacial" key="spacial" {...defaultWindowProps}>
48+
<NavigationBar>
49+
<div />
50+
<NavigationBarTitle>Spacial</NavigationBarTitle>
51+
<ButtonGroup>
52+
<HeroDropdownMenu />
53+
</ButtonGroup>
54+
</NavigationBar>
55+
<div className="h-[600px]" />
56+
</OrnamentContent>
57+
</OrnamentContents>
58+
<OrnamentTabs>
59+
<OrnamentTab
60+
icon={<IconPhotoFilled data-slot="icon" />}
61+
label="Memories"
62+
value="memories"
63+
/>
64+
<OrnamentTab
65+
icon={<PencilRulerIcon className="size-6" data-slot="icon" />}
66+
label="Collections"
67+
value="collections"
68+
/>
69+
<OrnamentTab
70+
icon={<Settings data-slot="icon" />}
71+
label="Spacial"
72+
value="spacial"
73+
/>
74+
</OrnamentTabs>
75+
</Ornament>
76+
);
77+
}
78+
79+
export default PhotosPage;

‎app/(landing)/settings/layout.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import {
2+
Sidebar,
3+
SidebarContent,
4+
SidebarGroup,
5+
SidebarGroupContent,
6+
SidebarHeader,
7+
SidebarInput,
8+
SidebarMenu,
9+
SidebarMenuButton,
10+
SidebarMenuItem,
11+
SidebarProvider,
12+
} from "@/components/core/sidebar";
13+
14+
import {
15+
AppStoreIcon,
16+
CogIcon,
17+
EnvironmentsIcon,
18+
PeopleIcon,
19+
} from "@/components/icons";
20+
import { cn } from "@/lib/utils";
21+
import {
22+
IconBellRingingFilled,
23+
IconHourglassHigh,
24+
IconMoonFilled,
25+
} from "@tabler/icons-react";
26+
import { Window } from "@/components/core/window";
27+
import { defaultWindowProps } from "../constants";
28+
29+
const section_1 = [
30+
{
31+
title: "General",
32+
icon: CogIcon,
33+
gradient: "from-gray-400 to-gray-600",
34+
isActive: true,
35+
},
36+
{
37+
title: "Apps",
38+
icon: AppStoreIcon,
39+
gradient: "from-sky-500 to-blue-700",
40+
},
41+
{
42+
title: "People",
43+
icon: PeopleIcon,
44+
gradient: "from-green-400 to-green-600",
45+
},
46+
{
47+
title: "Environments",
48+
icon: EnvironmentsIcon,
49+
gradient: "from-indigo-400 to-indigo-800",
50+
},
51+
];
52+
53+
const section_2 = [
54+
{
55+
title: "Notifications",
56+
icon: IconBellRingingFilled,
57+
gradient: "from-rose-400 to-red-600",
58+
},
59+
{
60+
title: "Focus",
61+
href: "#",
62+
icon: IconMoonFilled,
63+
gradient: "from-indigo-400 to-indigo-800",
64+
},
65+
{
66+
title: "Screen Time",
67+
href: "#",
68+
icon: IconHourglassHigh,
69+
gradient: "from-indigo-400 to-indigo-800",
70+
},
71+
];
72+
73+
export default function SettingsLayout({
74+
children,
75+
}: {
76+
children: React.ReactNode;
77+
}) {
78+
return (
79+
<Window {...defaultWindowProps}>
80+
<SidebarProvider>
81+
<Sidebar>
82+
<SidebarHeader>
83+
<SidebarInput placeholder="Search" />
84+
</SidebarHeader>
85+
<SidebarContent>
86+
<SidebarGroup>
87+
<SidebarGroupContent>
88+
<SidebarMenu>
89+
{section_1.map((item) => (
90+
<SidebarMenuItem key={item.title}>
91+
<SidebarMenuButton
92+
className="gap-4 [&_[data-slot='icon']]:opacity-75"
93+
isActive={item.isActive}
94+
>
95+
<item.icon data-slot="icon" />
96+
<span
97+
className={cn(
98+
"absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
99+
"bg-gradient-to-b",
100+
item.gradient,
101+
)}
102+
/>
103+
<span>{item.title}</span>
104+
</SidebarMenuButton>
105+
</SidebarMenuItem>
106+
))}
107+
</SidebarMenu>
108+
</SidebarGroupContent>
109+
</SidebarGroup>
110+
<SidebarGroup className="pt-0">
111+
<SidebarGroupContent>
112+
<SidebarMenu>
113+
{section_2.map((item) => (
114+
<SidebarMenuItem key={item.title}>
115+
<SidebarMenuButton className="gap-4 [&_[data-slot='icon']]:opacity-75">
116+
<item.icon data-slot="icon" />
117+
<span
118+
className={cn(
119+
"absolute left-3.5 top-2 z-[-1] size-8 rounded-full",
120+
"bg-gradient-to-b",
121+
item.gradient,
122+
)}
123+
/>
124+
<span>{item.title}</span>
125+
</SidebarMenuButton>
126+
</SidebarMenuItem>
127+
))}
128+
</SidebarMenu>
129+
</SidebarGroupContent>
130+
</SidebarGroup>
131+
</SidebarContent>
132+
</Sidebar>
133+
<main className="relative w-full">{children}</main>
134+
</SidebarProvider>
135+
</Window>
136+
);
137+
}

‎app/(landing)/settings/page.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {
2+
NavigationBar,
3+
NavigationBarTitle,
4+
} from "@/components/core/navigation-bar";
5+
import { SidebarTrigger } from "@/components/core/sidebar";
6+
7+
export const dynamic = "force-dynamic";
8+
9+
export default function Settings() {
10+
//* Artifical delay
11+
// await new Promise((resolve) => setTimeout(resolve, 600));
12+
return (
13+
<>
14+
<NavigationBar size="sm" className="sticky rounded-tl-none px-3.5">
15+
<SidebarTrigger />
16+
<NavigationBarTitle variant="center">Settings</NavigationBarTitle>
17+
</NavigationBar>
18+
<div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
19+
<div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
20+
<div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
21+
<div className="relative my-4 h-[200px] bg-red-500/20">Main Content</div>
22+
</>
23+
);
24+
}

0 commit comments

Comments
 (0)