Skip to content

Commit

Permalink
Merge branch 'yoyo-HomePage-Socials' of https://github.com/UoaWDCC/as…
Browse files Browse the repository at this point in the history
…pa-portal-v3 into yoyo-HomePage-Socials
  • Loading branch information
AlotOfTypos committed Aug 7, 2024
2 parents 26d1e83 + bd80d23 commit 5160f4e
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 2 deletions.
5 changes: 3 additions & 2 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.2.1",
"tailwind-scrollbar": "^3.1.0"
"tailwind-scrollbar": "^3.1.0",
"react-social-media-embed": "^2.5.13"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react": "^18.3.1",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.2",
Expand Down
48 changes: 48 additions & 0 deletions frontend/src/components/socials.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
.socials{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}

.socialsBorders1{
display: flex;
justify-content: center;
align-items: center;
border-radius: 45px;
background-color: #87562A;
margin: 7px;
width: 394px;
height: 473px;
}

.socialsBorders2{
display: flex;
justify-content: center;
align-items: center;
border-radius: 45px;
background-color: #DD995B;
margin: 7px;
width: 394px;
height: 473px;
}

.socialsBorders3{
display: flex;
justify-content: center;
align-items: center;
border-radius: 45px;
background-color: #AA6F29;
margin: 7px;
width: 394px;
height: 473px;
}

.previews{
justify-content: center;
align-items: center;
width: 350px;
height: 422px;
}
24 changes: 24 additions & 0 deletions frontend/src/components/socials.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
'use client';
import React from 'react';
import styles from './socials.module.css';
import { InstagramEmbed } from 'react-social-media-embed/dist/components/embeds/InstagramEmbed';
import { LinkedInEmbed } from 'react-social-media-embed/dist/components/embeds/LinkedInEmbed';
import { FacebookEmbed } from 'react-social-media-embed/dist/components/embeds/FacebookEmbed';

function Socials() {
return (
<div className={styles.socials}>
<div className={styles.socialsBorders1}>
<InstagramEmbed className={styles.previews} url="https://www.instagram.com/aspa.uoa/?hl=en"/>
</div>
<div className={styles.socialsBorders2}>
<LinkedInEmbed className={styles.previews} url="https://www.linkedin.com/company/aspa-auckland-student-pool-association"/>
</div>
<div className={styles.socialsBorders3}>
<FacebookEmbed className={styles.previews} url="https://www.facebook.com/login/?next=https%3A%2F%2Fwww.facebook.com%2Faspa.uoa%2F"/>
</div>
</div>
);
}

export default Socials;

0 comments on commit 5160f4e

Please sign in to comment.