elcharitas · elcharitas · Feb 24, 2023 · Feb 24, 2023 · Feb 24, 2023 · Feb 24, 2023
diff --git a/src/app.html b/src/app.html
@@ -6,7 +6,18 @@
 		<link rel="icon" href="%sveltekit.assets%/logo-square.svg" sizes="any" type="image/svg+xml" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Chakra UI Svelte</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
+			rel="stylesheet"
+		/>
 		%sveltekit.head%
+		<style>
+			* {
+				font-family: Poppins, sans-serif;
+			}
+		</style>
 	</head>
 	<body>
 		<div>%sveltekit.body%</div>

diff --git a/src/docs/components/ActionButton.svelte b/src/docs/components/ActionButton.svelte
@@ -0,0 +1,36 @@
+<script>
+	import { current_component } from 'svelte/internal';
+	import { Button, Icon, Link, VisuallyHidden } from '$lib/components';
+	import { eventsForward } from '$lib/core';
+
+	import { hoverBg, color } from '../../stores';
+
+	export let icon = '';
+	export let label = '';
+	export let href = '';
+	export let target = '_blank';
+	export let rel = 'button';
+	const SocialIcon = icon || 'span';
+	const events = eventsForward(current_component);
+</script>
+
+<Link {href} {target} {rel}>
+	<Button
+		sx={{
+			bg: 'transparent',
+			'&:hover': {
+				bg: $hoverBg
+			}
+		}}
+		size="xs"
+		display="flex"
+		justifyContent="center"
+		alignItems="center"
+		title={label}
+		{events}
+	>
+		<VisuallyHidden>{label}</VisuallyHidden>
+		<Icon as={SocialIcon} wrap="div" w="4" h="4" color={$color} />
+		<slot />
+	</Button>
+</Link>
diff --git a/src/docs/components/SocialButton.svelte b/src/docs/components/SocialButton.svelte
diff --git a/src/docs/layout/Footer.svelte b/src/docs/layout/Footer.svelte
@@ -1,32 +1,36 @@
 <script>
-	import { Box, Stack, Text } from '$lib/components';
-	import { colorModeValue } from '$lib/stores';
-
-	import SocialButton from '../components/SocialButton.svelte';
+	import { Box, Stack, Text, Link } from '$lib/components';
 	import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
 	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
+	import FaLinkedin from 'svelte-icons/fa/FaLinkedin.svelte';
+	import FaEmail from 'svelte-icons/fa/FaEnvelope.svelte';
 
-	const bg = colorModeValue('gray.50', 'gray.900');
-	const color = colorModeValue('gray.700', 'gray.200');
+	import { bg, color } from '../../stores';
+	import ActionButton from '../components/ActionButton.svelte';
 </script>
 
 <Box bg={$bg} color={$color}>
 	<Stack
 		py={4}
-		orientation="horizontal"
 		spacing={4}
-		justifyContent={{ base: 'center', md: 'space-between' }}
-		alignItems={{ base: 'center', md: 'center' }}
+		flexDirection="column"
+		justifyContent="center"
+		alignItems="center"
+		fontSize="sm"
 	>
-		<Text>© 2022 Chakra UI. All rights reserved</Text>
-		<Stack
-			orientation="horizontal"
-			spacing={6}
-			justifyContent={{ base: 'center', md: 'space-between' }}
-			sx={{ fontSize: 'sm' }}
-		>
-			<SocialButton label="Twitter" icon={FaTwitter} href="#" />
-			<SocialButton label="YouTube" icon={FaGithub} href="#" />
+		<Text>
+			Proudly developed by
+			<Link href="https://elcharitas.dev" target="_blank">Jonathan Irhodia</Link>
+		</Text>
+		<Stack>
+			<ActionButton label="Follow on Github" icon={FaGithub} href="https://github.com" />
+			<ActionButton label="Follow on Twitter" icon={FaTwitter} />
+			<ActionButton label="Connect on Linkedin" icon={FaLinkedin} />
+			<ActionButton
+				label="Send me an Email"
+				icon={FaEmail}
+				href="mailto:[email protected]"
+			/>
 		</Stack>
 	</Stack>
 </Box>
diff --git a/src/docs/layout/Navbar.svelte b/src/docs/layout/Navbar.svelte
@@ -1,12 +1,71 @@
 <script>
-	import { Box, Flex, Stack, Text, Button, IconButton, Logo } from '$lib/components';
-	import { colorModeValue } from '$lib/stores';
+	import { Box, Flex, Stack, ButtonGroup, Input, Logo } from '$lib/components';
+	import { colorMode } from '$lib/stores';
+
+	import FaTwitter from 'svelte-icons/fa/FaTwitter.svelte';
+	import FaGithub from 'svelte-icons/fa/FaGithub.svelte';
+	import FaSun from 'svelte-icons/fa/FaSun.svelte';
+	import FaMoon from 'svelte-icons/fa/FaMoon.svelte';
+
+	import { bg, inputBg, color } from '../../stores';
+	import ActionButton from '../components/ActionButton.svelte';
 </script>
 
-<Box>
-	<Stack flex={{ base: 1, md: 0 }} justify={'flex-end'} direction={'row'} spacing={6}>
+<Box
+	as="nav"
+	h="16"
+	bg={$bg}
+	shadow="md"
+	display="flex"
+	alignItems="center"
+	justifyContent="space-around"
+>
+	<Stack direction="row" spacing={6}>
 		<Logo />
-		<Button fontSize={'sm'} fontWeight={400} bgColor="green.500">Sign In</Button>
-		<Button fontSize={'sm'} fontWeight={400}>Sign In</Button>
 	</Stack>
+
+	<Flex justify="center" justifyContent="center" display={{ base: 'none', md: 'flex' }} />
+
+	<Flex justify="right" justifyContent="end">
+		<Input
+			placeholder="Search the docs."
+			sx={{
+				bg: $inputBg,
+				color: $color,
+				width: '300px',
+				fontWeight: 400,
+				fontSize: 'sm',
+				_hover: {
+					bg: $inputBg
+				},
+				_placeholder: {
+					color: 'gray.400'
+				}
+			}}
+			mr="8"
+			display={{ base: 'none', md: 'inline' }}
+		/>
+		<ButtonGroup alignItems="center" justifyContent="space-between">
+			<ActionButton
+				label="Star the Github Repo"
+				icon={FaGithub}
+				href="https://github.com"
+				display={{ base: 'none', md: 'inline' }}
+			/>
+			<ActionButton label="Twitter" icon={FaTwitter} display={{ base: 'none', md: 'inline' }} />
+			{#if $colorMode === 'dark'}
+				<ActionButton
+					icon={FaSun}
+					label="Switch to light Mode"
+					on:click={() => colorMode.set('light')}
+				/>
+			{:else}
+				<ActionButton
+					icon={FaMoon}
+					label="Switch to dark Mode"
+					on:click={() => colorMode.set('dark')}
+				/>
+			{/if}
+		</ButtonGroup>
+	</Flex>
 </Box>
diff --git a/src/lib/components/buttons/ButtonGroup.svelte b/src/lib/components/buttons/ButtonGroup.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { current_component } from 'svelte/internal';
+	import { eventsForward } from '$lib/core';
+	import Stack from '../stacks/Stack.svelte';
+
+	const events = eventsForward(current_component);
+</script>
+
+<Stack {events} {...$$props}>
+	<slot />
+</Stack>
diff --git a/src/lib/components/buttons/IconButton.svelte b/src/lib/components/buttons/IconButton.svelte
@@ -4,8 +4,8 @@
 	import Button from './Button.svelte';
 	import Icon from '$lib/components/basic/Icon.svelte';
 
-	export let icon;
-    export let wrap = "div";
+	export let icon: string;
+	export let wrap = 'div';
 	const events = eventsForward(current_component);
 </script>
 

diff --git a/src/lib/components/buttons/index.ts b/src/lib/components/buttons/index.ts
@@ -1,2 +1,4 @@
 export { default as Button } from './Button.svelte';
 export { default as IconButton } from './IconButton.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as RippleButton } from './RippleButton.svelte';
diff --git a/src/lib/stores/colormode.ts b/src/lib/stores/colormode.ts
@@ -36,7 +36,7 @@ export const isDarkMode = derived(colorMode, (colorMode) => colorMode === 'dark'
  * @param dark
  * @returns
  */
-export const colorModeValue = (light: unknown, dark: unknown) => {
+export const colorModeValue = <T extends unknown>(light: T, dark: T) => {
 	const store = createStore(() => light);
 	colorMode.subscribe((val) => {
 		store.set(val === 'light' ? light : dark);

diff --git a/src/lib/utils/store.ts b/src/lib/utils/store.ts
@@ -19,7 +19,7 @@ export function createStore<T>(
 
 	return {
 		initial,
-		get: get.bind({}, store),
+		get: get.bind({}, store) as T,
 		...store
 	};
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,11 +1,16 @@
 <script lang="ts">
-	import { ChakraProvider } from '$lib/components';
+	import { ThemeProvider, Box, Container } from '$lib/components';
 	import Navbar from '$docs/layout/Navbar.svelte';
 	import Footer from '$docs/layout/Footer.svelte';
+	import { bg, color } from '../stores';
 </script>
 
-<ChakraProvider>
-	<Navbar />
-	<slot />
-	<Footer />
-</ChakraProvider>
+<ThemeProvider>
+	<Box bg={$bg} color={$color} minH="100vh">
+		<Navbar />
+		<Container>
+			<slot />
+		</Container>
+		<Footer />
+	</Box>
+</ThemeProvider>
diff --git a/src/stores.ts b/src/stores.ts
@@ -0,0 +1,6 @@
+import { colorModeValue } from '$lib/stores/colormode';
+
+export const color = colorModeValue('gray.600', 'gray.300');
+export const hoverBg = colorModeValue('gray.60', 'gray.700');
+export const bg = colorModeValue('gray.50', 'gray.800');
+export const inputBg = colorModeValue('gray.200', 'gray.600');