new icons, copy, zoomed post

Co-authored-by: Raadwan Masum <[email protected]>
Co-authored-by: Rohan Juneja <[email protected]>
Co-authored-by: Aadit Gupta <[email protected]>

Author: 4 people

.eslintrc

@@ -37,6 +37,7 @@
 		"jsx-a11y/anchor-is-valid": 0,
 		"jsx-a11y/no-static-element-interactions": 0,
 		"jsx-a11y/click-events-have-key-events": 0,
-		"no-alert": 0
+		"no-alert": 0,
+		"jsx-a11y/no-noninteractive-element-interactions": 0
 	}
 }

components/UI/Card.tsx

@@ -4,31 +4,76 @@ import { CardProps } from '../../lib/types'
 import style from '../../styles/UI/Card.module.scss'
 
 const Card = (props: CardProps) => {
-	const { media, name, id, profilePic } = props
+	const { media, name, id, profilePic, isZoomed } = props
 	const router = useRouter()
 
 	return (
-		<div className={style.cardWrapper}>
-			<div className={style.card} onClick={() => router.push(`/post/${id}`)}>
-				<div>
-					<div className={style.profilePic}>
+		<div
+			className={
+				isZoomed
+					? `${style.cardWrapper} ${style.zoomedCardWrapper}`
+					: style.cardWrapper
+			}
+		>
+			<div
+				className={isZoomed ? `${style.card} ${style.cardZoomed}` : style.card}
+			>
+				<div
+					className={
+						isZoomed
+							? `${style.cardBar} ${style.zoomedCardBar}`
+							: style.cardBar
+					}
+				>
+					<div
+						className={
+							isZoomed
+								? `${style.profilePic} ${style.zoomedProfilePic}`
+								: style.profilePic
+						}
+					>
 						<img
 							src={profilePic}
 							alt={`${name}'s profile`}
 							className={style.profilePicImg}
 						/>
 						<h1>{name}</h1>
+						<img
+							src="/copy.svg"
+							alt="copy to clipboard"
+							className={style.copy}
+							onClick={() => {
+								navigator.clipboard.writeText(
+									`https://webshare.team3749.org/post/${id}`
+								)
+								alert('Copied post link to clipboard!')
+							}}
+						/>
 					</div>
 					<h2>{media.title}</h2>
 				</div>
 				<img
 					src={media.image}
 					alt={`${name}'s post: ${media.title}`}
-					className={style.cardImage}
+					className={
+						isZoomed
+							? `${style.cardImage} ${style.zoomedCardImage}`
+							: style.cardImage
+					}
+					onClick={() => router.push(`/post/${id}`)}
 				/>
-				<div className={style.tagCollection}>
+				<div
+					className={
+						isZoomed
+							? `${style.tagCollection} ${style.zoomedTagCollection}`
+							: style.profilePic
+					}
+				>
 					{media.tags.map((tag) => (
-						<div className={style.tag}>
+						<div
+							className={style.tag}
+							onClick={() => router.push(`/?tag=${tag}`)}
+						>
 							<div className={style.circle} />
 							<p>{tag.replace('_', ' ')}</p>
 						</div>

components/UI/Nav.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 import { logOut, useAuthState } from '../../lib/firebase'
 import theme from '../../lib/theme'
@@ -9,11 +10,19 @@ import style from '../../styles/UI/Nav.module.scss'
 const Nav = (props: NavProps) => {
 	const { active } = props
 	const [user, loading] = useAuthState()
+	const router = useRouter()
 
 	return (
 		<div className={style.nav}>
 			<div>
-				<Image src="/icon.png" alt="Site Icon" width={30} height={30} />
+				<Image
+					src="/icon.png"
+					alt="Site Icon"
+					width={30}
+					height={30}
+					className={style.button}
+					onClick={() => router.push('/')}
+				/>
 			</div>
 			<div>
 				<Link href="/" passHref>

lib/types.ts

@@ -9,6 +9,7 @@ export interface CardProps {
 		tags: string[]
 	}
 	date: number
+	isZoomed?: boolean
 }
 
 export interface GridProps {

pages/index.tsx

@@ -3,9 +3,8 @@ import { useRouter } from 'next/router'
 import Meta from '../components/SEO/Meta'
 import Grid from '../components/UI/Grid'
 import Nav from '../components/UI/Nav'
-import { getPosts, logOut, usePosts } from '../lib/firebase'
+import { getPosts, usePosts } from '../lib/firebase'
 import { GridProps } from '../lib/types'
-import style from '../styles/UI/Index.module.scss'
 
 export const getServerSideProps = async () => {
 	const cards = await getPosts()
@@ -16,22 +15,19 @@ const Index = (props: GridProps) => {
 	const { cards } = props
 
 	const router = useRouter()
-	const posts = usePosts(cards)
+	const rawPosts = usePosts(cards)
+
+	const realCards = !router.query.tag
+		? rawPosts
+		: rawPosts.filter((card) =>
+				card.media.tags.includes(router.query.tag as string)
+		  )
 
 	return (
 		<>
 			<Meta />
 			<Nav active="posts" />
-			<Grid cards={posts} />
-			<button
-				onClick={async () => {
-					await logOut()
-					router.push('/login')
-				}}
-				type="button"
-			>
-				<img className={style.logOut} src="/logout.png" alt="Log Out" />
-			</button>
+			<Grid cards={realCards} />
 		</>
 	)
 }

pages/post/[slug].tsx

@@ -35,7 +35,7 @@ const Slug = (props: CardPropsProp) => {
 		<>
 			<Meta />
 			<Nav active="posts" />
-			<Card {...trueCard} />
+			<Card {...trueCard} isZoomed />
 		</>
 	)
 }

public/copy.svg

@@ -26,3 +26,22 @@ textarea:focus,
 button:focus {
 	outline: none !important;
 }
+
+::selection {
+	color: #0fbea7;
+	background-color: #0fbea73a;
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: 3px;
+	transition: all 0.2s;
+	background: #0fbea793;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: rgba(15, 190, 167, 0.808);
+}

public/vercel.svg

@@ -3,10 +3,13 @@
 	height: 100%;
 	display: flex;
 	justify-content: center;
+	word-wrap: break-all !important;
 }
 
 .profilePic {
 	display: flex;
+	align-items: center;
+	margin-bottom: 0.5rem;
 }
 
 .profilePicImg {
@@ -27,28 +30,31 @@
 	flex-direction: column;
 	justify-content: space-between;
 	align-items: flex-start;
-	cursor: pointer;
+	word-break: break-all !important;
 
 	&:hover {
 		box-shadow: 0 2.5px 3.2px rgba(0, 0, 0, 0.048),
 			0 8.3px 10.7px rgba(0, 0, 0, 0.072), 0 37px 48px rgba(0, 0, 0, 0.12);
 	}
 
+	&:hover .copy {
+		opacity: 1 !important;
+	}
+
 	h1 {
 		color: #111212;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
 	}
 
 	h2 {
 		color: #111212;
 		margin-bottom: 0.2rem;
+		word-break: break-all !important;
 		font-weight: 300;
 	}
 
-	img {
-		color: #111212;
+	.cardImage {
 		width: 100%;
+		cursor: pointer;
 		border-radius: 3px;
 	}
 
@@ -80,10 +86,64 @@
 
 	.tagCollection {
 		display: flex;
+		align-items: flex-end;
 		width: 100%;
 
 		&:first-child {
 			margin-right: 0.5rem;
 		}
+
+		&:hover {
+			cursor: pointer;
+		}
+	}
+}
+
+.copy {
+	opacity: 0;
+	height: 19px;
+	cursor: pointer;
+	order: 2;
+	margin-left: auto;
+}
+
+.cardBar {
+	width: 100%;
+}
+
+.zoomedCardImage {
+	max-width: 400px !important;
+}
+
+.cardZoomed {
+	box-shadow: none !important;
+	.copy {
+		display: none !important;
+	}
+	& > * {
+		margin: 0.5rem;
 	}
+	align-items: center;
+	justify-content: center;
+}
+
+.zoomedCardBar {
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	margin: 0 auto;
+}
+
+.zoomedProfilePic {
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	margin: 0 auto;
+}
+
+.zoomedTagCollection {
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	margin: 0 auto;
 }