Skip to content

Commit 84ae719

Browse files
atilafassinaatilafassina
committed
add context-menu to download logos
1 parent 6f737ec commit 84ae719

File tree

8 files changed

+326
-2
lines changed

8 files changed

+326
-2
lines changed

‎apps/landing-page/public/solid-logo.png‎

29.1 KB
Loading

‎apps/landing-page/public/solid-logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎apps/landing-page/public/solid-logos.zip‎

119 KB
Binary file not shown.

‎apps/landing-page/public/start-logo.png‎

89.9 KB
Loading

‎apps/landing-page/public/logo.svg‎ renamed to ‎apps/landing-page/public/start-logo.svg‎

File renamed without changes.

‎apps/landing-page/src/components/download-logos-menu.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import {
2+
ContextMenu,
3+
ContextMenuContent,
4+
ContextMenuGroup,
5+
ContextMenuItem,
6+
ContextMenuPortal,
7+
ContextMenuSub,
8+
ContextMenuSubContent,
9+
ContextMenuSubTrigger,
10+
ContextMenuTrigger
11+
} from "~/components/ui/context-menu";
12+
import { SolidStartLogo } from "./icons/solidstart-logo";
13+
export function DownloadLogosMenu() {
14+
return (
15+
<ContextMenu>
16+
<ContextMenuTrigger>
17+
<SolidStartLogo class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] size-52 md:size-[400px] mx-auto" />
18+
</ContextMenuTrigger>
19+
<ContextMenuPortal>
20+
<ContextMenuContent>
21+
<ContextMenuGroup>
22+
<ContextMenuSub overlap>
23+
<ContextMenuSubTrigger>
24+
Solid<b>Start</b>
25+
</ContextMenuSubTrigger>
26+
<ContextMenuPortal>
27+
<ContextMenuSubContent>
28+
<ContextMenuItem>
29+
<a href="/start-logo.png" download="solidstart-logo.png">
30+
solid-start.png
31+
</a>
32+
</ContextMenuItem>
33+
<ContextMenuItem>
34+
<a href="/start-logo.svg" download="solidstart-logo.svg">
35+
solid-start.svg
36+
</a>
37+
</ContextMenuItem>
38+
</ContextMenuSubContent>
39+
</ContextMenuPortal>
40+
</ContextMenuSub>
41+
</ContextMenuGroup>
42+
43+
<ContextMenuGroup>
44+
<ContextMenuSub overlap>
45+
<ContextMenuSubTrigger>Solid</ContextMenuSubTrigger>
46+
<ContextMenuPortal>
47+
<ContextMenuSubContent>
48+
<ContextMenuItem>
49+
<a href="/solid-logo.png" download="solid-logo.png">
50+
solid-logo.png
51+
</a>
52+
</ContextMenuItem>
53+
<ContextMenuItem>
54+
<a href="/solid-logo.svg" download="solid-logo.svg">
55+
solid-logo.svg
56+
</a>
57+
</ContextMenuItem>
58+
</ContextMenuSubContent>
59+
</ContextMenuPortal>
60+
</ContextMenuSub>
61+
</ContextMenuGroup>
62+
<ContextMenuItem>
63+
<a href="/solid-logos.zip" download="solid-logos.zip">
64+
solid-logos.zip
65+
</a>
66+
</ContextMenuItem>
67+
</ContextMenuContent>
68+
</ContextMenuPortal>
69+
</ContextMenu>
70+
);
71+
}

‎apps/landing-page/src/components/sections/hero.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { CodeSnippet } from "../code-snippet";
2+
import { DownloadLogosMenu } from "../download-logos-menu";
23
import { GithubIcon } from "../icons/github-icon";
3-
import { SolidStartLogo } from "../icons/solidstart-logo";
44
import { buttonVariants } from "../ui/button";
5+
56
import { AnimatedShinyText } from "../ui/mystic/shine";
67

78
const buttonOutlineStyles = buttonVariants({
@@ -24,7 +25,7 @@ export function Hero() {
2425
</a>
2526
</div>
2627
<div class="max-w-5xl mx-auto">
27-
<SolidStartLogo class="drop-shadow-[10px_20px_35px_rgb(125,211,252,0.3)] size-52 md:size-[400px] mx-auto" />
28+
<DownloadLogosMenu />
2829
<div class="flex flex-col">
2930
<div class="text-center text-6xl font-semibold">
3031
Solid<span class="text-[#017AD4]">Start</span>

‎apps/landing-page/src/components/ui/context-menu.tsx‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
2+
import { splitProps } from "solid-js";
3+
4+
import * as ContextMenuPrimitive from "@kobalte/core/context-menu";
5+
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
6+
7+
import { cn } from "~/lib/utils";
8+
9+
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
10+
const ContextMenuPortal = ContextMenuPrimitive.Portal;
11+
const ContextMenuSub = ContextMenuPrimitive.Sub;
12+
const ContextMenuGroup = ContextMenuPrimitive.Group;
13+
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
14+
15+
const ContextMenu: Component<ContextMenuPrimitive.ContextMenuRootProps> = props => {
16+
return <ContextMenuPrimitive.Root gutter={4} {...props} />;
17+
};
18+
19+
type ContextMenuContentProps<T extends ValidComponent = "div"> =
20+
ContextMenuPrimitive.ContextMenuContentProps<T> & {
21+
class?: string | undefined;
22+
};
23+
24+
const ContextMenuContent = <T extends ValidComponent = "div">(
25+
props: PolymorphicProps<T, ContextMenuContentProps<T>>
26+
) => {
27+
const [local, others] = splitProps(props as ContextMenuContentProps, ["class"]);
28+
return (
29+
<ContextMenuPrimitive.Portal>
30+
<ContextMenuPrimitive.Content
31+
class={cn(
32+
"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-sm bg-popover text-popover-foreground shadow-md animate-in",
33+
"bg-gradient-to-b from-blue-800/80 dark:via-blue-900 dark:to-[#081924] via-white to-white",
34+
local.class
35+
)}
36+
{...others}
37+
/>
38+
</ContextMenuPrimitive.Portal>
39+
);
40+
};
41+
42+
type ContextMenuItemProps<T extends ValidComponent = "div"> =
43+
ContextMenuPrimitive.ContextMenuItemProps<T> & {
44+
class?: string | undefined;
45+
};
46+
47+
const ContextMenuItem = <T extends ValidComponent = "div">(
48+
props: PolymorphicProps<T, ContextMenuItemProps<T>>
49+
) => {
50+
const [local, others] = splitProps(props as ContextMenuItemProps, ["class"]);
51+
return (
52+
<ContextMenuPrimitive.Item
53+
class={cn(
54+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
55+
local.class
56+
)}
57+
{...others}
58+
/>
59+
);
60+
};
61+
62+
const ContextMenuShortcut: Component<ComponentProps<"span">> = props => {
63+
const [local, others] = splitProps(props, ["class"]);
64+
return <span class={cn("ml-auto text-xs tracking-widest opacity-60", local.class)} {...others} />;
65+
};
66+
67+
type ContextMenuSeparatorProps<T extends ValidComponent = "hr"> =
68+
ContextMenuPrimitive.ContextMenuSeparatorProps<T> & {
69+
class?: string | undefined;
70+
};
71+
72+
const ContextMenuSeparator = <T extends ValidComponent = "hr">(
73+
props: PolymorphicProps<T, ContextMenuSeparatorProps<T>>
74+
) => {
75+
const [local, others] = splitProps(props as ContextMenuSeparatorProps, ["class"]);
76+
return (
77+
<ContextMenuPrimitive.Separator
78+
class={cn("-mx-1 my-1 h-px bg-muted", local.class)}
79+
{...others}
80+
/>
81+
);
82+
};
83+
84+
type ContextMenuSubTriggerProps<T extends ValidComponent = "div"> =
85+
ContextMenuPrimitive.ContextMenuSubTriggerProps<T> & {
86+
class?: string | undefined;
87+
children?: JSX.Element;
88+
};
89+
90+
const ContextMenuSubTrigger = <T extends ValidComponent = "div">(
91+
props: PolymorphicProps<T, ContextMenuSubTriggerProps<T>>
92+
) => {
93+
const [local, others] = splitProps(props as ContextMenuSubTriggerProps, ["class", "children"]);
94+
return (
95+
<ContextMenuPrimitive.SubTrigger
96+
class={cn(
97+
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
98+
local.class
99+
)}
100+
{...others}
101+
>
102+
{local.children}
103+
<svg
104+
xmlns="http://www.w3.org/2000/svg"
105+
viewBox="0 0 24 24"
106+
fill="none"
107+
stroke="currentColor"
108+
stroke-width="2"
109+
stroke-linecap="round"
110+
stroke-linejoin="round"
111+
class="ml-auto size-4"
112+
>
113+
<path d="M9 6l6 6l-6 6" />
114+
</svg>
115+
</ContextMenuPrimitive.SubTrigger>
116+
);
117+
};
118+
119+
type ContextMenuSubContentProps<T extends ValidComponent = "div"> =
120+
ContextMenuPrimitive.ContextMenuSubContentProps<T> & {
121+
class?: string | undefined;
122+
};
123+
124+
const ContextMenuSubContent = <T extends ValidComponent = "div">(
125+
props: PolymorphicProps<T, ContextMenuSubContentProps<T>>
126+
) => {
127+
const [local, others] = splitProps(props as ContextMenuSubContentProps, ["class"]);
128+
return (
129+
<ContextMenuPrimitive.SubContent
130+
class={cn(
131+
"z-50 min-w-32 origin-[var(--kb-menu-content-transform-origin)] overflow-hidden rounded-sm bg-popover p-1 text-popover-foreground shadow-md animate-in",
132+
"bg-gradient-to-b from-blue-800/80 dark:via-blue-900 dark:to-[#142238] via-white to-white",
133+
local.class
134+
)}
135+
{...others}
136+
/>
137+
);
138+
};
139+
140+
type ContextMenuCheckboxItemProps<T extends ValidComponent = "div"> =
141+
ContextMenuPrimitive.ContextMenuCheckboxItemProps<T> & {
142+
class?: string | undefined;
143+
children?: JSX.Element;
144+
};
145+
146+
const ContextMenuCheckboxItem = <T extends ValidComponent = "div">(
147+
props: PolymorphicProps<T, ContextMenuCheckboxItemProps<T>>
148+
) => {
149+
const [local, others] = splitProps(props as ContextMenuCheckboxItemProps, ["class", "children"]);
150+
return (
151+
<ContextMenuPrimitive.CheckboxItem
152+
class={cn(
153+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
154+
local.class
155+
)}
156+
{...others}
157+
>
158+
<span class="absolute left-2 flex size-3.5 items-center justify-center">
159+
<ContextMenuPrimitive.ItemIndicator>
160+
<svg
161+
xmlns="http://www.w3.org/2000/svg"
162+
viewBox="0 0 24 24"
163+
fill="none"
164+
stroke="currentColor"
165+
stroke-width="2"
166+
stroke-linecap="round"
167+
stroke-linejoin="round"
168+
class="size-4"
169+
>
170+
<path d="M5 12l5 5l10 -10" />
171+
</svg>
172+
</ContextMenuPrimitive.ItemIndicator>
173+
</span>
174+
{local.children}
175+
</ContextMenuPrimitive.CheckboxItem>
176+
);
177+
};
178+
179+
type ContextMenuGroupLabelProps<T extends ValidComponent = "span"> =
180+
ContextMenuPrimitive.ContextMenuGroupLabelProps<T> & {
181+
class?: string | undefined;
182+
};
183+
184+
const ContextMenuGroupLabel = <T extends ValidComponent = "span">(
185+
props: PolymorphicProps<T, ContextMenuGroupLabelProps<T>>
186+
) => {
187+
const [local, others] = splitProps(props as ContextMenuGroupLabelProps, ["class"]);
188+
return (
189+
<ContextMenuPrimitive.GroupLabel
190+
class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
191+
{...others}
192+
/>
193+
);
194+
};
195+
196+
type ContextMenuRadioItemProps<T extends ValidComponent = "div"> =
197+
ContextMenuPrimitive.ContextMenuRadioItemProps<T> & {
198+
class?: string | undefined;
199+
children?: JSX.Element;
200+
};
201+
202+
const ContextMenuRadioItem = <T extends ValidComponent = "div">(
203+
props: PolymorphicProps<T, ContextMenuRadioItemProps<T>>
204+
) => {
205+
const [local, others] = splitProps(props as ContextMenuRadioItemProps, ["class", "children"]);
206+
return (
207+
<ContextMenuPrimitive.RadioItem
208+
class={cn(
209+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
210+
local.class
211+
)}
212+
{...others}
213+
>
214+
<span class="absolute left-2 flex size-3.5 items-center justify-center">
215+
<ContextMenuPrimitive.ItemIndicator>
216+
<svg
217+
xmlns="http://www.w3.org/2000/svg"
218+
viewBox="0 0 24 24"
219+
fill="none"
220+
stroke="currentColor"
221+
stroke-width="2"
222+
stroke-linecap="round"
223+
stroke-linejoin="round"
224+
class="size-2 fill-current"
225+
>
226+
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
227+
</svg>
228+
</ContextMenuPrimitive.ItemIndicator>
229+
</span>
230+
{local.children}
231+
</ContextMenuPrimitive.RadioItem>
232+
);
233+
};
234+
235+
export {
236+
ContextMenu,
237+
ContextMenuCheckboxItem,
238+
ContextMenuContent,
239+
ContextMenuGroup,
240+
ContextMenuGroupLabel,
241+
ContextMenuItem,
242+
ContextMenuPortal,
243+
ContextMenuRadioGroup,
244+
ContextMenuRadioItem,
245+
ContextMenuSeparator,
246+
ContextMenuShortcut,
247+
ContextMenuSub,
248+
ContextMenuSubContent,
249+
ContextMenuSubTrigger,
250+
ContextMenuTrigger
251+
};

0 commit comments

Comments
 (0)