Skip to content

Commit c144ba6

Browse files
shinokadashinokada
committed
feat!: Footer component updated
1 parent b3c20ac commit c144ba6

Some content is hidden

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

47 files changed

+622
-804
lines changed

‎src/lib/footer/Footer.svelte‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
11
<script lang="ts">
2-
import classNames from 'classnames';
3-
// social media
4-
export let footerClass: string = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
5-
// logo footer
6-
// export let footerClass: string = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
7-
// simple footer
8-
// export let footerClass: string = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
9-
// sitemap
10-
// export let footerClass: string = 'bg-white dark:bg-gray-800';
11-
export let footerType:'sitemap'|'simple'|'logo'|'socialmedia'='sitemap'
12-
const footerClasses={
13-
sitemap:{},
14-
simple:
15-
}
2+
import classNames from 'classnames';
3+
export let footerType: 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
164
</script>
5+
6+
<footer
7+
class={classNames(
8+
{
9+
'bg-gray-800': footerType === 'sitemap',
10+
'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
11+
'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
12+
'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
13+
footerType === 'default'
14+
},
15+
$$props.class
16+
)}
17+
>
18+
<slot />
19+
</footer>

‎src/lib/footer/FooterBrand.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import classNames from 'classnames';
3+
export let aClass: string = 'flex items-center';
4+
export let spanClass: string =
5+
'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
6+
export let imgClass: string = 'mr-3 h-8';
7+
export let href: string = '';
8+
export let src: string = '';
9+
export let alt: string = '';
10+
export let name: string = '';
11+
</script>
12+
13+
{#if href}
14+
<a {href} class={classNames(aClass, $$props.class)}>
15+
<img {src} class={imgClass} {alt} />
16+
<span class={spanClass}>{name}</span>
17+
<slot />
18+
</a>
19+
{:else}
20+
<img {src} class={imgClass} {alt} />
21+
{/if}

‎src/lib/footer/FooterCopyright.svelte‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import classNames from 'classnames';
3+
export let spanClass: string = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
4+
export let aClass: string = 'hover:underline';
5+
export let year: number = new Date().getFullYear();
6+
export let href: string = '';
7+
export let by: string = '';
8+
</script>
9+
10+
<span class={classNames(spanClass, $$props.class)}>
11+
&copy; {year}
12+
{#if href}
13+
<a {href} class={aClass}>
14+
{by}
15+
</a>
16+
{:else}
17+
<span class="ml-1">{by}</span>
18+
{/if}
19+
. All Rights Reserved.
20+
</span>

‎src/lib/footer/FooterIcon.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts">
2+
import classNames from 'classnames';
3+
import type { SvelteComponent } from 'svelte';
4+
export let href: string = '';
5+
export let ariaLabel: string = '';
6+
export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
7+
export let icon: typeof SvelteComponent | null = null;
8+
export let iconClass: string = 'h-5 w-5';
9+
export let size: string = '20';
10+
</script>
11+
12+
{#if href}
13+
<a {href} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
14+
<svelte:component this={icon} {size} class={iconClass} />
15+
</a>
16+
{:else}
17+
<svelte:component this={icon} {size} class={iconClass} />
18+
{/if}

‎src/lib/footer/FooterLink.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts">
2+
import classNames from 'classnames';
3+
export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
4+
export let aClass: string = 'hover:underline';
5+
export let href: string = '';
6+
</script>
7+
8+
<li class={classNames(liClass, $$props.class)}>
9+
<a {href} class={aClass}>
10+
<slot />
11+
</a>
12+
</li>

‎src/lib/footer/FooterLinkGroup.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts">
2+
import classNames from 'classnames';
3+
export let ulClass: string = 'text-gray-600 dark:text-gray-400';
4+
</script>
5+
6+
<ul class={classNames(ulClass, $$props.class)}>
7+
<slot />
8+
</ul>

‎src/lib/footer/LogoFooter.svelte‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
export let site: SiteType;
55
66
export let links: LinkType[];
7-
export let footerClass: string =
8-
'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
97
export let divClass: string = 'sm:flex sm:items-center sm:justify-between';
108
export let siteNameClass: string =
119
'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
@@ -22,23 +20,21 @@
2220
export let allRightsReserved: string = 'All Rights Reserved.';
2321
</script>
2422

25-
<footer class={classNames(footerClass, $$props.class)}>
26-
<div class={divClass}>
27-
<a href={site.href} class={siteNameLinkClass}>
28-
<img src={site.img} class={imgClass} alt={site.name} />
29-
<span class={siteNameClass}>{site.name}</span>
30-
</a>
31-
<ul class={ulClass}>
32-
{#each links as { name, href, rel }}
33-
<li>
34-
<a {href} {rel} class={aClass}>{name}</a>
35-
</li>
36-
{/each}
37-
</ul>
38-
</div>
39-
<hr class={hrClass} />
40-
<span class={copyRightSpanClass}
41-
>{copyrightYear}
42-
<a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
43-
</span>
44-
</footer>
23+
<div class={divClass}>
24+
<a href={site.href} class={siteNameLinkClass}>
25+
<img src={site.img} class={imgClass} alt={site.name} />
26+
<span class={siteNameClass}>{site.name}</span>
27+
</a>
28+
<ul class={ulClass}>
29+
{#each links as { name, href, rel }}
30+
<li>
31+
<a {href} {rel} class={aClass}>{name}</a>
32+
</li>
33+
{/each}
34+
</ul>
35+
</div>
36+
<hr class={hrClass} />
37+
<span class={copyRightSpanClass}
38+
>{copyrightYear}
39+
<a href={site.href} class={copyRightLinkClass}>{site.name}</a>. {allRightsReserved}
40+
</span>

‎src/lib/footer/SimpleFooter.svelte‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
import type { LinkType, SiteType } from '../types';
44
export let site: SiteType;
55
export let links: LinkType[];
6-
export let footerClass: string =
7-
'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
86
export let siteNameClass: string = 'text-sm text-gray-500 sm:text-center dark:text-gray-400';
97
export let ulClass: string = 'flex flex-wrap items-center mt-3 sm:mt-0';
108
export let aClass: string =
@@ -14,16 +12,14 @@
1412
export let allRightsReserved: string = 'All Rights Reserved.';
1513
</script>
1614

17-
<footer class={classNames(footerClass, $$props.class)}>
18-
<span class={siteNameClass}
19-
>{copyrightYear}
20-
<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
21-
</span>
22-
<ul class={ulClass}>
23-
{#each links as { name, href, rel }}
24-
<li>
25-
<a {href} {rel} class={aClass}>{name}</a>
26-
</li>
27-
{/each}
28-
</ul>
29-
</footer>
15+
<span class={siteNameClass}
16+
>{copyrightYear}
17+
<a href={site.href} class={siteNameLinkClass} target="_blank">{site.name}</a>. {allRightsReserved}
18+
</span>
19+
<ul class={ulClass}>
20+
{#each links as { name, href, rel }}
21+
<li>
22+
<a {href} {rel} class={aClass}>{name}</a>
23+
</li>
24+
{/each}
25+
</ul>

‎src/lib/footer/SitemapFooter.svelte‎

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,47 @@
33
export let site: SiteType;
44
export let links: SocialMediaLinkType[];
55
export let socialMedia: SocialMediaType[];
6-
export let footerClass: string = 'bg-white dark:bg-gray-800';
76
export let linksClass: string = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
87
export let parentClass: string = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
98
export let ulClass: string = 'text-gray-900 dark:text-gray-300';
109
export let liClass: string = 'mb-4';
1110
export let linkClass: string = 'hover:underline';
12-
export let copyrightDivClass: string = 'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
11+
export let copyrightDivClass: string =
12+
'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
1313
export let copyrightClass: string = 'text-sm text-gray-900 dark:text-gray-300 sm:text-center';
1414
export let socialMediaDivClass: string = 'flex mt-4 space-x-6 sm:justify-center md:mt-0';
15-
export let socialMediaLinkClass: string = 'text-gray-900 dark:text-gray-400 hover:text-gray-300 dark:hover:text-white';
15+
export let socialMediaLinkClass: string =
16+
'text-gray-900 dark:text-gray-400 hover:text-gray-300 dark:hover:text-white';
1617
export let iconClass: string = 'h-5 w-5 mr-2';
1718
export let copyrightYear: string = '© 2022';
1819
export let allRightsReserved: string = 'All Rights Reserved.';
1920
</script>
2021

21-
<footer class="{footerClass} {$$props.class ? $$props.class : ''}">
22-
<div class={linksClass}>
23-
{#each links as { parent, children }}
24-
<div>
25-
<h2 class={parentClass}>
26-
{parent}
27-
</h2>
28-
<ul class={ulClass}>
29-
{#each children as { name, href }}
30-
<li class={liClass}>
31-
<a {href} class={linkClass}>{name}</a>
32-
</li>
33-
{/each}
34-
</ul>
35-
</div>
36-
{/each}
37-
</div>
38-
<div class={copyrightDivClass}>
39-
<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
40-
<div class={socialMediaDivClass}>
41-
{#each socialMedia as { href, icon }}
42-
<a {href} class={socialMediaLinkClass}>
43-
<svelte:component this={icon} className={iconClass} />
44-
</a>
45-
{/each}
22+
<div class={linksClass}>
23+
{#each links as { parent, children }}
24+
<div>
25+
<h2 class={parentClass}>
26+
{parent}
27+
</h2>
28+
<ul class={ulClass}>
29+
{#each children as { name, href }}
30+
<li class={liClass}>
31+
<a {href} class={linkClass}>{name}</a>
32+
</li>
33+
{/each}
34+
</ul>
4635
</div>
36+
{/each}
37+
</div>
38+
<div class={copyrightDivClass}>
39+
<span class={copyrightClass}
40+
>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved}
41+
</span>
42+
<div class={socialMediaDivClass}>
43+
{#each socialMedia as { href, icon }}
44+
<a {href} class={socialMediaLinkClass}>
45+
<svelte:component this={icon} className={iconClass} />
46+
</a>
47+
{/each}
4748
</div>
48-
</footer>
49+
</div>

‎src/lib/footer/SocialMediaFooter.svelte‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
export let site: SiteType;
55
export let links: SocialMediaLinkType[];
66
export let socialMedia: SocialMediaType[];
7-
export let footerClass: string = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
87
export let divClass: string = 'md:flex md:justify-between';
98
export let divClass2: string = 'mb-6 md:mb-0';
109
export let siteLinkClass: string = 'flex items-center';
@@ -28,44 +27,42 @@
2827
export let allRightsReserved: string = 'All Rights Reserved.';
2928
</script>
3029

31-
<footer class={classNames(footerClass, $$props.class)}>
32-
<div class={divClass}>
33-
<div class={divClass2}>
34-
<a href={site.href} class={siteLinkClass}>
35-
<img src={site.img} class={imgClass} alt={site.name} />
36-
<span class={siteNameSpanClass}>{site.name}</span>
37-
</a>
38-
<slot />
39-
</div>
40-
<div class={linksDivClass}>
41-
{#each links as { parent, children }}
42-
<div>
43-
<h2 class={parentClass}>
44-
{parent}
45-
</h2>
46-
<ul class={ulClass}>
47-
{#each children as { name, href }}
48-
<li class={liClass}>
49-
<a {href} class={linkClass}>{name}</a>
50-
</li>
51-
{/each}
52-
</ul>
53-
</div>
54-
{/each}
55-
</div>
30+
<div class={divClass}>
31+
<div class={divClass2}>
32+
<a href={site.href} class={siteLinkClass}>
33+
<img src={site.img} class={imgClass} alt={site.name} />
34+
<span class={siteNameSpanClass}>{site.name}</span>
35+
</a>
36+
<slot />
37+
</div>
38+
<div class={linksDivClass}>
39+
{#each links as { parent, children }}
40+
<div>
41+
<h2 class={parentClass}>
42+
{parent}
43+
</h2>
44+
<ul class={ulClass}>
45+
{#each children as { name, href }}
46+
<li class={liClass}>
47+
<a {href} class={linkClass}>{name}</a>
48+
</li>
49+
{/each}
50+
</ul>
51+
</div>
52+
{/each}
5653
</div>
57-
<hr class={hrClass} />
58-
<div class={copyrightDivClass}>
59-
<span class={copyrightClass}
60-
>{copyrightYear}
61-
<a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
62-
</span>
63-
<div class={socialMediaDivClass}>
64-
{#each socialMedia as { href, icon }}
65-
<a {href} class={socialMediaLinkClass}>
66-
<svelte:component this={icon} class={iconClass} />
67-
</a>
68-
{/each}
69-
</div>
54+
</div>
55+
<hr class={hrClass} />
56+
<div class={copyrightDivClass}>
57+
<span class={copyrightClass}
58+
>{copyrightYear}
59+
<a href={site.href} class="hover:underline">{site.name}</a>. {allRightsReserved}
60+
</span>
61+
<div class={socialMediaDivClass}>
62+
{#each socialMedia as { href, icon }}
63+
<a {href} class={socialMediaLinkClass}>
64+
<svelte:component this={icon} class={iconClass} />
65+
</a>
66+
{/each}
7067
</div>
71-
</footer>
68+
</div>

0 commit comments

Comments
 (0)