Skip to content
This repository has been archived by the owner on Apr 21, 2024. It is now read-only.

feat: creating a footer #42

Merged
merged 31 commits into from
Oct 25, 2023
Merged

feat: creating a footer #42

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
79ad5a7
feat: create footer
CBID2 Oct 17, 2023
7657538
feat: added code and logo
CBID2 Oct 17, 2023
5c5683e
feat: add width
CBID2 Oct 18, 2023
3e08bb4
Revert "feat: create footer"
CBID2 Oct 18, 2023
5485bd3
feat: add comments here
CBID2 Oct 18, 2023
42ad87d
feat: add export value
CBID2 Oct 18, 2023
1a64f93
feat: add CSS
CBID2 Oct 18, 2023
8bd02e3
feat: upload logo
CBID2 Oct 19, 2023
47737b8
feat: imported logo
CBID2 Oct 19, 2023
0a8825c
feat: add height and width to logo
CBID2 Oct 19, 2023
f2f404a
feat: add copyright information
CBID2 Oct 19, 2023
c17417f
Merge branch 'YurisCodingClub:main' into adding-a-footer
CBID2 Oct 20, 2023
f215aac
fix: revise import name
CBID2 Oct 20, 2023
60e56a7
fix: moved images
CBID2 Oct 20, 2023
3a4e9a5
fix: revise file path for import logo
CBID2 Oct 20, 2023
4e9b186
fix: revise file path for image import again
CBID2 Oct 20, 2023
3739d91
fix: revising the file path again
CBID2 Oct 20, 2023
418a74a
fix: made image a self-closing tag
CBID2 Oct 20, 2023
11f425c
fix: moved logo and renamed file path
CBID2 Oct 22, 2023
d127280
fix: revise file path
CBID2 Oct 22, 2023
18494d6
fix: moved logo.svg to a new folder
CBID2 Oct 22, 2023
c46ebfa
fix: replace CSS property
CBID2 Oct 22, 2023
929f806
fix: revise height property to auto
CBID2 Oct 22, 2023
5f78e4a
fix: add margin and text-align center
CBID2 Oct 22, 2023
d722626
fix: remove extra CSS and revise alt text
CBID2 Oct 23, 2023
c623715
feat: import footer to main page
CBID2 Oct 23, 2023
4011381
fix: omit alt text
CBID2 Oct 24, 2023
9bbda8e
fix: improved footer's CSS
CBID2 Oct 24, 2023
7acab80
fix: went with simple CSS
CBID2 Oct 25, 2023
a1d26a3
fix: remove space between the quotation marks near alt=
CBID2 Oct 25, 2023
5c82834
fix: add space between imports & function for readability
CBID2 Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions pages/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";
import Image from "next/image";
import logo from '../../../assets/logo.png';
CBID2 marked this conversation as resolved.
Show resolved Hide resolved


const Footer = () => {
return (
<footer style={{ width: "100%", position: "relative", bottom: "0"}}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain the usage of position here? I could not see a difference when not using it. Maybe I oversee something here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @YuriDevAT. I was struggling with moving it to the bottom position: relative; So I found this tutorial to help me.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for sharing. The tutorial is good! Is it working as expected on your side? As mentioned in the tutorial, the position attribute for the footer depends on the settings of the main component. Since you did not make any changes there I guess it will not work.

<Image src={Logo} alt="footer-logo" width={100} height={100}></Image>
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice usage of the Image tag 😄. It can be used as a self closing tag, written as <Image src={Logo} alt="footer-logo" width={100} height={100} />, as tags for images are generally written in HTML.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image size is reforming the logo.
Logo reformation

Correct implemention of default width and height directly on the component 👏🏽 If the ration is not known it can be calculated, or (which is not best practice but would do it for now), use height="auto" to keep the ratio of the logo.

<p className="copyright"> AccessibilityMentor 2023. All rights reserved.</p>
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
</footer>
);
};

export default Footer;
Binary file added stories/assets/logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading