Browse Source

Added the new ui component path

pull/5/head
Navneet Sharma 2 years ago
parent
commit
447dd09426
  1. 1
      src/lib/shared/index.ts
  2. 15
      src/lib/shared/ui/components/footer/Footer.svelte
  3. 1
      src/lib/shared/ui/components/footer/index.ts
  4. 41
      src/lib/shared/ui/components/header/Header.svelte
  5. 1
      src/lib/shared/ui/components/header/index.ts
  6. 2
      src/lib/shared/ui/components/index.ts
  7. 1
      src/lib/shared/ui/index.ts
  8. 36
      src/routes/$layout.svelte
  9. 0
      src/styles/app.scss
  10. 0
      src/styles/global.scss
  11. 1
      svelte.config.cjs
  12. 4
      tsconfig.json

1
src/lib/shared/index.ts

@ -1 +1,2 @@ @@ -1 +1,2 @@
export * from './components';
export * from './ui';

15
src/lib/shared/ui/components/footer/Footer.svelte

@ -0,0 +1,15 @@ @@ -0,0 +1,15 @@
<style lang="scss" type="text/scss">
p {
text-transform: uppercase;
font-weight: 100;
font-size: 1rem;
}
</style>
<script lang="ts">
export let footerText: string;
</script>
<header>
<p>{footerText}</p>
</header>

1
src/lib/shared/ui/components/footer/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export { default as Footer } from './Footer.svelte';

41
src/lib/shared/ui/components/header/Header.svelte

@ -0,0 +1,41 @@ @@ -0,0 +1,41 @@
<style lang="scss" type="text/scss">
.text-color {
text-transform: uppercase;
}
</style>
<script lang="ts">
export let title: string = '';
</script>
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a
rel="prefetch"
class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
href="/"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-10 h-10 text-white p-2 bg-green-500 rounded-full"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">{title}</span>
</a>
<nav
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"
>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/">Home</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/about">About</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/settings">Settings</a>
</nav>
</div>
</header>

1
src/lib/shared/ui/components/header/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export { default as Header } from './Header.svelte';

2
src/lib/shared/ui/components/index.ts

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
export { Footer } from './footer';
export { Header } from './header';

1
src/lib/shared/ui/index.ts

@ -0,0 +1 @@ @@ -0,0 +1 @@
export * from './components';

36
src/routes/$layout.svelte

@ -1,9 +1,10 @@ @@ -1,9 +1,10 @@
<script lang="ts">
import '../app.scss';
import '../global.scss';
import '../styles/app.scss';
import '../styles/global.scss';
import { ApplicationTitles } from '$components';
import type { IApplicationRouteTitle } from '$lib/models';
import Header from '$ui/components/header/Header.svelte';
const routeData: IApplicationRouteTitle[] = [
{
@ -34,34 +35,5 @@ @@ -34,34 +35,5 @@
</script>
<ApplicationTitles routePathData="{routeData}" />
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a
rel="prefetch"
class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0"
href="/"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
class="w-10 h-10 text-white p-2 bg-green-500 rounded-full"
viewBox="0 0 24 24"
>
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Tailblocks</span>
</a>
<nav
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"
>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/">Home</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/about">About</a>
<a rel="prefetch" class="mr-5 hover:text-gray-900" href="/settings">Settings</a>
</nav>
</div>
</header>
<Header title="Sveltekit Starter" />
<slot />

0
src/app.scss → src/styles/app.scss

0
src/global.scss → src/styles/global.scss

1
svelte.config.cjs

@ -33,6 +33,7 @@ module.exports = { @@ -33,6 +33,7 @@ module.exports = {
resolve: {
alias: {
$components: resolve(__dirname, './src/lib/shared/components'),
$ui: resolve(__dirname, './src/lib/shared/ui'),
$shared: resolve(__dirname, './src/lib/shared'),
$models: resolve(__dirname, './src/lib/models'),
$core: resolve(__dirname, './src/lib/core'),

4
tsconfig.json

@ -33,7 +33,9 @@ @@ -33,7 +33,9 @@
"$shared": ["src/lib/shared/index.ts"],
"$shared/*": ["src/lib/shared/*"],
"$components": ["src/lib/shared/components/index.ts"],
"$components/*": ["src/lib/shared/components/*"],
"$components/*": ["src/lib/shared/ui/*"],
"$ui": ["src/lib/shared/ui/index.ts"],
"$ui/*": ["src/lib/shared/components/*"],
"$models": ["src/lib/models/index.ts"],
"$models/*": ["src/lib/models/*"]
}

Loading…
Cancel
Save