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 28 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
22 changes: 22 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,22 @@
import React from "react";
import Image from "next/image";
import logo from "../../stories/assets/logo.png";

const Footer = () => {
return (
<footer
style={{
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
textAlign: "center",
Copy link
Member

@YuriDevAT YuriDevAT Oct 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Not needed. Please stick to the AC. Also discussed on LinkedIn 👇🏽

just go without position, just leave the width:100% and we are good to go 😊

Conversation on additional styling

Next steps 👉🏽 Remove everything except the width. Only do as much as described in the AC to get your PRs merged. The design of the footer will look nothing alike as it is now. So, all this code is going to be removed with the next ticket for the footer already, which is unnecessary work for the next contributor as well as for the maintainer mentioning this step in the ticket.

Expected output

<footer
  style={{
    width: "100%",
  }}
>

Wish 🙏🏽 : Please talk and explain reasoning behind your decisions for me to understand certain things better. If there are things you do not understand, ask me! This prevents unnecessary work for both of us which is very much appreciated to create a smooth work experience.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks for your input with this @YuriDevAT. I was going back and forth with using Flexbox. I wanted to show of my knowledge a bit more (plus Flexbox is easier to use in my experience), but I wanted to follow the task list. Unfortunately, I went with my slightly more ambitious side. No worries, I'll definitely stick with your suggestions this time.

Copy link
Member

Choose a reason for hiding this comment

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

I know the feeling all to well 😁. But you will be able to show off your skills when we dive deeper into the code base, I promise 🤞🏽

}}
>
<Image src={logo} alt=" " width={100} height="auto" />
Copy link
Member

Choose a reason for hiding this comment

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

Please remove space between quotes:
Now: alt=" "
After: alt=""

<p>AccessibilityMentor 2023. All rights reserved.</p>
</footer>
);
};

export default Footer;
3 changes: 2 additions & 1 deletion pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Head from "next/head";
import Content from "../components/content";
import Header from "./components/Header";
import Hero from "../components/hero/Hero";

import Footer from "./components/Footer";
export default function Home() {
CBID2 marked this conversation as resolved.
Show resolved Hide resolved
return (
<div>
Expand All @@ -16,6 +16,7 @@ export default function Home() {
<Content />
<Hero />
</main>
<Footer />
</div>
);
}
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