Skip to content

Commit

Permalink
feat: add 404 page (#1390)
Browse files Browse the repository at this point in the history
  • Loading branch information
foxyblocks authored Jul 24, 2023
1 parent b75f69f commit 37bd475
Show file tree
Hide file tree
Showing 10 changed files with 561 additions and 30 deletions.
28 changes: 28 additions & 0 deletions components/atoms/FullHeightContainer/full-height-container.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* A react component that will ensure that its min-height is the same as the screen height.
* This is not possible with pure css because some mobile browsers don't account for the top and bottom bars
* when calculating `vh`.
* see https://dev.to/nirazanbasnet/dont-use-100vh-for-mobile-responsive-3o97
*/

import clsx from "clsx";
import React, { useEffect, useState } from "react";
import { useWindowSize } from "react-use";

interface Props extends React.HTMLAttributes<HTMLDivElement> {}

export default function FullHeightContainer(props: Props) {
const { children, className, ...rest } = props;
const { height: innerHeight } = useWindowSize();
const [minHeight, setMinHeight] = useState<string>("100vh");

useEffect(() => {
setMinHeight(`${innerHeight}px`);
}, [innerHeight]);

return (
<div className={clsx("grid min-h-screen max-h-screen", className)} style={{ minHeight: minHeight }} {...rest}>
{children}
</div>
);
}
10 changes: 9 additions & 1 deletion components/molecules/AuthSection/auth-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Link from "next/link";

import { IoNotifications } from "react-icons/io5";
import { FiLogOut, FiSettings } from "react-icons/fi";
import { BiLinkExternal } from "react-icons/bi";
import { Divider } from "@supabase/ui";

import useSession from "lib/hooks/useSession";
Expand Down Expand Up @@ -85,6 +86,14 @@ const AuthSection: React.FC = ({}) => {
</div>
<Text className="group-hover:text-light-orange-10">{user?.user_metadata.user_name}</Text>
</Link>,
<Link
href={"https://docs.opensauced.pizza/community/faqs/"}
key="faqs"
className="flex items-center px-4 py-2 text-lg transition rounded-md cursor-pointer group gap-x-3 hover:bg-light-orange-3"
>
<BiLinkExternal className="group-hover:text-light-orange-10" />
<Text className="group-hover:text-light-orange-10">FAQs</Text>
</Link>,
<Link
href="/user/settings"
key="settings"
Expand Down Expand Up @@ -112,7 +121,6 @@ const AuthSection: React.FC = ({}) => {
</span>,
],
};

return (
<div className="flex p-2 m-1 sm:py-0">
<div className="flex items-center gap-2 lg:gap-3">
Expand Down
22 changes: 14 additions & 8 deletions components/molecules/DevCard/dev-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export interface DevCardProps {
isLoading?: boolean;
isFlipped?: boolean;
isInteractive?: boolean;
hideProfileButton?: boolean;
age?: number;
onFlip?: () => void;
}
Expand All @@ -50,6 +51,9 @@ export default function DevCard(props: DevCardProps) {
const profileHref = `/user/${props.username}`;

function handleCardClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
if (!isInteractive) {
return;
}
// flip the card if the click is not on the button
if (!(event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement)) {
if (props.isFlipped === undefined) {
Expand Down Expand Up @@ -85,11 +89,10 @@ export default function DevCard(props: DevCardProps) {

return (
<div
className="DevCard rounded-3x"
className="DevCard"
style={{
width: "245px",
height: "348px",
boxShadow: "0px 0px 20px -12px rgba(0, 0, 0, 0.25)",
}}
>
<Tilt
Expand All @@ -98,8 +101,9 @@ export default function DevCard(props: DevCardProps) {
trackOnWindow={isInteractive}
glareBorderRadius="1.5rem"
flipHorizontally={isFlipped}
className={clsx("DevCard-card", "relative", "rounded-3x", "w-full", "h-full")}
className={clsx("DevCard-card", "relative", "rounded-3xl", "w-full", "h-full", "border", "border-gray-400")}
style={{
boxShadow: "0px 0px 20px -12px rgba(0, 0, 0, 0.25)",
transformStyle: "preserve-3d",
}}
>
Expand Down Expand Up @@ -232,11 +236,13 @@ export default function DevCard(props: DevCardProps) {
</div>
{/* bottom */}
<div className="px-2 mt-auto justify-self-end">
<Link href={profileHref} passHref>
<Button variant="primary" className="w-full text-center justify-center mt-4 !py-1">
View Profile
</Button>
</Link>
{!props.hideProfileButton && (
<Link href={profileHref} passHref>
<Button variant="primary" className="w-full text-center justify-center mt-4 !py-1">
View Profile
</Button>
</Link>
)}
<div className="flex justify-center mt-2">
<Image className="rounded" alt="Open Sauced Logo" width={13} height={13} src={openSaucedImg} />
<p className={"font-semibold text-white ml-1"} style={{ fontSize: "8px" }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ interface TopContributorsPanelProps {
loggedInUserLogin: string;
}
const TopContributorsPanel = ({ loggedInUserLogin }: TopContributorsPanelProps) => {
const { data, isLoading } = useFetchTopContributors();
const { data, isLoading } = useFetchTopContributors({ limit: 20 });

const topContributorsWithoutLoggedInUser = data ? data.filter((user) => user.login !== loggedInUserLogin) : [];
const top3Contributors = topContributorsWithoutLoggedInUser.slice(0, 3).map((user) => user.login);
Expand Down
Loading

0 comments on commit 37bd475

Please sign in to comment.