-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update footer #319
Open
julian-ao
wants to merge
11
commits into
main
Choose a base branch
from
footer
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Update footer #319
Changes from all commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
05ea83d
update footer
julian-ao 4ee993e
darkmode
julian-ao 854f555
Merge branch 'main' into footer
julian-ao a737dd1
Merge branch 'main' into footer
julian-ao b27e5aa
Using next Image tag instead of img
julian-ao 09cdc8a
Removed bekk from navbar since it is in footer
julian-ao 07b670f
feat: add debug link
jorgengaldal 429fcc5
Update components/Footer.tsx
julian-ao ba131e2
darker background on footer and navbar in lightmode
julian-ao 6e01e87
add min-h-screen
fredrir 30524b0
Merge branch 'footer' of https://github.com/appKom/online-opptak into…
fredrir File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,120 @@ | ||
const Footer = () => { | ||
import { | ||
Slack, | ||
Facebook, | ||
Instagram, | ||
Github, | ||
Mail, | ||
ExternalLink, | ||
Bug, | ||
} from "lucide-react"; | ||
import Link from "next/link"; | ||
import Image from "next/image"; | ||
import { useTheme } from "../lib/hooks/useTheme"; | ||
|
||
const footerLinks = [ | ||
{ name: "Slack", icon: <Slack />, link: "https://onlinentnu.slack.com/" }, | ||
{ | ||
name: "Facebook", | ||
icon: <Facebook />, | ||
link: "http://facebook.com/LinjeforeningenOnline", | ||
}, | ||
{ | ||
name: "Instagram", | ||
icon: <Instagram />, | ||
link: "https://www.instagram.com/online_ntnu/", | ||
}, | ||
{ name: "Github", icon: <Github />, link: "https://github.com/appKom" }, | ||
]; | ||
|
||
export default function Footer() { | ||
const theme = useTheme(); | ||
|
||
return ( | ||
<div className="w-full py-5 px-5 flex flex-col items-center gap-3 text-online-darkTeal dark:text-white"> | ||
<div> | ||
Skjedd en feil? Ta kontakt med{" "} | ||
<a | ||
className="font-semibold underline transition-all hover:text-online-orange" | ||
href="mailto:appkom@online.ntnu.no" | ||
> | ||
Appkom | ||
</a>{" "} | ||
:) | ||
<footer className="px-4 py-12 mt-24 text-gray-700 bg-zinc-50 border-t border-gray-300 dark:text-gray-300 dark:border-gray-700 md:px-6 lg:px-8 dark:bg-gray-800"> | ||
<div className="mx-auto max-w-7xl"> | ||
<div className="flex flex-col items-center justify-between mb-8 space-y-8 md:flex-row md:space-y-0"> | ||
<div className="flex flex-col items-center space-y-4 md:items-start"> | ||
<h2 className="text-2xl font-bold">Online Opptak</h2> | ||
<Link href="mailto:onlinefondet@online.ntnu.no" passHref> | ||
<a className="flex items-center gap-2 transition-colors cursor-pointer hover:text-online-orange"> | ||
<Mail size={18} /> | ||
appkom@online.ntnu.no | ||
</a> | ||
</Link> | ||
</div> | ||
|
||
<a href="https://docs.google.com/forms/d/e/1FAIpQLScvjEqVsiRIYnVqCNqbH_-nmYk3Ux6la8a7KZzsY3sJDbW-iA/viewform" | ||
target="_blank" | ||
rel="noreferrer" | ||
className='flex items-center justify-center h-full gap-3 p-1.5 bg-[#f3f4f6] dark:bg-[#212f4d] rounded-lg max-h-min'> | ||
<div className="p-1 text-center text-gray-600 dark:text-white"> | ||
<div className="flex items-center justify-center gap-2"> | ||
<p className="font-semibold text-lg">Debug</p> | ||
<Bug className="w-5" /> | ||
</div> | ||
<p className="text-sm">Opplevd noe ugreit?</p> | ||
<p className="text-sm">Trykk her for mer info</p> | ||
</div> | ||
</a> | ||
|
||
<div className="flex flex-col items-center space-y-4 md:items-end"> | ||
<div className="flex space-x-4"> | ||
{footerLinks.map((link, index) => ( | ||
<Link href={link.link} key={index} passHref> | ||
<a | ||
className="transition cursor-pointer hover:text-online-orange" | ||
aria-label={link.name} | ||
> | ||
{link.icon} | ||
</a> | ||
</Link> | ||
))} | ||
</div> | ||
<div className="text-sm text-center md:text-right"> | ||
<p>Skjedd en feil?</p> | ||
<Link | ||
href="mailto:appkom@online.ntnu.no" | ||
className="flex items-center justify-center md:justify-end" | ||
passHref | ||
> | ||
<a className="flex items-center space-x-1 transition hover:text-online-orange hover:underline"> | ||
<span>Ta kontakt med Appkom</span> | ||
<ExternalLink size={14} /> | ||
</a> | ||
</Link> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div className="flex flex-col items-center justify-between py-8 space-y-6 border-t border-gray-300 dark:border-gray-700 md:flex-row md:space-y-0"> | ||
<div className="flex items-center space-x-6"> | ||
<Link href="https://online.ntnu.no/" target="_blank"> | ||
<a className="transition hover:opacity-50"> | ||
<Image | ||
src={theme === "dark" ? "/Online_hvit.svg" : "/Online_bla.svg"} | ||
alt="Online logo" | ||
width={128} | ||
height={34} | ||
/> | ||
</a> | ||
</Link> | ||
<Link href="https://www.bekk.no/" target="_blank"> | ||
<a className="transition hover:opacity-50"> | ||
<Image | ||
src={theme === "dark" ? "/bekk_white.svg" : "/bekk_black.svg"} | ||
alt="Online logo" | ||
width={128} | ||
height={57} | ||
/> | ||
</a> | ||
</Link> | ||
</div> | ||
<p className="text-sm text-gray-400 dark:text-gray-500"> | ||
© {new Date().getFullYear()} Online Opptak | ||
reservert. | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
</footer > | ||
); | ||
}; | ||
|
||
export default Footer; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hvorfor a inne i Link?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Får ikke til å style
Link
-taggen med className, så det var måten jeg fikk style linken på.