Skip to content

Commit aaf8049

Browse files
shairezshairez
committed
Merge branch 'pr/shairez/283' into main
2 parents 94a2d42 + 4b2eb54 commit aaf8049

Some content is hidden

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

59 files changed

+469
-145
lines changed

‎apps/website/public/fonts/poppins-400.woff2

7.7 KB
Binary file not shown.

‎apps/website/public/fonts/poppins-500.woff2

7.57 KB
Binary file not shown.

‎apps/website/public/fonts/poppins-700.woff2

7.63 KB
Binary file not shown.

‎apps/website/public/images/kit-cta-headless.png

191 KB
Loading

‎apps/website/public/images/kit-cta-tailwind.png

81 KB
Loading

‎apps/website/src/_state/app-state-context-id.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createContextId } from '@builder.io/qwik';
2+
import { AppState } from './app-state.type';
3+
4+
export const APP_STATE_CONTEXT_ID = createContextId<AppState>(
5+
'app-state-context-id'
6+
);

‎apps/website/src/_state/app-state.type.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export interface AppState {
2+
mode: 'light' | 'dark';
3+
}

‎apps/website/src/_state/use-css-theme.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useTask$ } from '@builder.io/qwik';
2+
import { isBrowser } from '@builder.io/qwik/build';
3+
import { AppState } from './app-state.type';
4+
5+
export const THEME_STORAGE_KEY = 'theme-preference';
6+
7+
export const useCSSTheme = (appState: AppState) => {
8+
useTask$(({ track }) => {
9+
track(() => appState.mode);
10+
11+
if (isBrowser) {
12+
document.documentElement.setAttribute('class', appState.mode);
13+
localStorage.setItem(THEME_STORAGE_KEY, appState.mode);
14+
}
15+
});
16+
};

‎apps/website/src/components/header/header.tsx

Lines changed: 46 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,75 @@
1-
import {
2-
$,
3-
component$,
4-
useContext,
5-
useSignal,
6-
useTask$,
7-
} from '@builder.io/qwik';
1+
import { $, component$, useContext, useSignal } from '@builder.io/qwik';
82
import { useLocation } from '@builder.io/qwik-city';
9-
import { isBrowser } from '@builder.io/qwik/build';
103
import { version } from '../../../../../package.json';
11-
import { APP_STATE } from '../../constants';
124
import { CloseIcon } from '../icons/CloseIcon';
135
import { GitHubIcon } from '../icons/GitHubIcon';
146
import { MenuIcon } from '../icons/MenuIcon';
157
import { MoonIcon } from '../icons/MoonIcon';
168
import { SunIcon } from '../icons/SunIcon';
179
import { Menu } from '../menu/menu';
1810
import { SelectTheme } from '../selectTheme/selectTheme';
11+
import { APP_STATE_CONTEXT_ID } from '../../_state/app-state-context-id';
12+
import { useCSSTheme } from '../../_state/use-css-theme';
1913

2014
export default component$(() => {
2115
const location = useLocation();
22-
const appState = useContext(APP_STATE);
16+
const appState = useContext(APP_STATE_CONTEXT_ID);
2317
const menuOpenSignal = useSignal(false);
2418

2519
const toggleMenu$ = $(() => {
2620
menuOpenSignal.value = !menuOpenSignal.value;
2721
});
2822

2923
const toggleDarkMode = $(() => {
30-
appState.darkMode = !appState.darkMode;
31-
});
32-
33-
const setThemeClass = $(() => {
34-
if (isBrowser) {
35-
const theme = appState.darkMode ? 'dark' : 'light';
36-
document.documentElement.setAttribute('class', theme);
37-
document.documentElement.setAttribute('data-theme', theme);
38-
localStorage.setItem('theme', theme);
39-
}
40-
});
41-
42-
useTask$(({ track }) => {
43-
track(() => appState.darkMode);
44-
setThemeClass();
24+
appState.mode = appState.mode === 'light' ? 'dark' : 'light';
4525
});
4626

4727
const isDocsRoute = location.url.pathname.indexOf('/docs/') !== -1;
4828

4929
return (
50-
<header class="fixed w-full z-10 border-b border-slate-600">
51-
<div class="flex p-4">
52-
<button
53-
type="button"
54-
aria-label="Toggle navigation"
55-
onClick$={toggleMenu$}
56-
class="block lg:hidden"
57-
>
58-
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
59-
</button>
60-
{menuOpenSignal.value && (
61-
<aside class="fixed top-0 left-0">
62-
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
63-
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
64-
<Menu onClose$={toggleMenu$} />
65-
</div>
66-
</aside>
67-
)}
68-
<div class="pl-6">
69-
<a href="/">
70-
<img src="/qwik-ui.png" class="w-32" />
71-
</a>
72-
</div>
73-
<div class="flex gap-2 w-full justify-end">
74-
<div data-tip="Qwik-UI Version" class="pt-2.5 px-2">
75-
v.{version}
76-
</div>
77-
{isDocsRoute && <SelectTheme />}
78-
<button
79-
type="button"
80-
aria-label="Toggle dark mode"
81-
onClick$={toggleDarkMode}
82-
>
83-
{appState.darkMode ? <MoonIcon /> : <SunIcon />}
84-
</button>
85-
<div class="px-2 pt-2">
86-
<a
87-
target="_blank"
88-
href="https://github.com/qwikifiers/qwik-ui"
89-
aria-label="Qwik-UI GitHub repository"
90-
>
91-
<GitHubIcon />
92-
</a>
30+
<header class="fixed w-full h-20 z-10 flex gap-8 p-4 items-center backdrop-blur">
31+
<button
32+
type="button"
33+
aria-label="Toggle navigation"
34+
onClick$={toggleMenu$}
35+
class="block lg:hidden"
36+
>
37+
{menuOpenSignal.value ? <CloseIcon /> : <MenuIcon />}
38+
</button>
39+
{menuOpenSignal.value && (
40+
<aside class="fixed top-0 left-0">
41+
<div class="fixed h-screen w-screen bg-gray-900/20 backdrop-blur-sm"></div>
42+
<div class="fixed h-screen w-80 overflow-y-scroll bg-white">
43+
<Menu onClose$={toggleMenu$} />
9344
</div>
94-
</div>
45+
</aside>
46+
)}
47+
<a href="/" class="lg:ml-8">
48+
<img src="/qwik-ui.png" class="h-12 w-auto" />
49+
</a>
50+
<div data-tip="Qwik-UI Version" class="mr-auto">
51+
v.{version}
9552
</div>
53+
<nav class="hidden sm:flex gap-4">
54+
<a href="/docs">Docs</a>
55+
<a href="/contact">Contact</a>
56+
</nav>
57+
{isDocsRoute && <SelectTheme />}
58+
<button
59+
type="button"
60+
aria-label="Toggle dark mode"
61+
onClick$={toggleDarkMode}
62+
>
63+
{appState.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
64+
</button>
65+
<a
66+
target="_blank"
67+
href="https://github.com/qwikifiers/qwik-ui"
68+
aria-label="Qwik-UI GitHub repository"
69+
class="sm:mr-8"
70+
>
71+
<GitHubIcon />
72+
</a>
9673
</header>
9774
);
9875
});

‎apps/website/src/components/icons/GitHubIcon.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
export const GitHubIcon = () => (
22
<svg
3-
width="20"
4-
height="20"
53
xmlns="http://www.w3.org/2000/svg"
6-
viewBox="0 0 512 512"
7-
class="inline-block h-5 w-5 fill-current md:h-6 md:w-6"
4+
width="32"
5+
height="32"
6+
viewBox="0 0 15 15"
7+
class="p-1 sm:block"
88
>
9-
<path d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path>
9+
<path
10+
fill="currentColor"
11+
fill-rule="evenodd"
12+
d="M7.5.25a7.25 7.25 0 0 0-2.292 14.13c.363.066.495-.158.495-.35c0-.172-.006-.628-.01-1.233c-2.016.438-2.442-.972-2.442-.972c-.33-.838-.805-1.06-.805-1.06c-.658-.45.05-.441.05-.441c.728.051 1.11.747 1.11.747c.647 1.108 1.697.788 2.11.602c.066-.468.254-.788.46-.969c-1.61-.183-3.302-.805-3.302-3.583a2.8 2.8 0 0 1 .747-1.945c-.075-.184-.324-.92.07-1.92c0 0 .61-.194 1.994.744A6.963 6.963 0 0 1 7.5 3.756A6.97 6.97 0 0 1 9.315 4c1.384-.938 1.992-.743 1.992-.743c.396.998.147 1.735.072 1.919c.465.507.745 1.153.745 1.945c0 2.785-1.695 3.398-3.31 3.577c.26.224.492.667.492 1.343c0 .97-.009 1.751-.009 1.989c0 .194.131.42.499.349A7.25 7.25 0 0 0 7.499.25Z"
13+
clip-rule="evenodd"
14+
/>
1015
</svg>
1116
);

0 commit comments

Comments
 (0)