Skip to content

Commit

Permalink
Merge pull request #47 from Kashyap1ankit/fix/hero
Browse files Browse the repository at this point in the history
added pwa
  • Loading branch information
Kashyap1ankit authored Nov 26, 2024
2 parents f4a99c7 + d985796 commit 768388b
Show file tree
Hide file tree
Showing 16 changed files with 431 additions and 78 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,8 @@
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-this-alias": "off",
"@typescript-eslint/no-unnecessary-type-constraint": "off",
"@typescript-eslint/ban-types": "off"
"@typescript-eslint/ban-types": "off",
"no-console": "warn"
},
"overrides": [
{
Expand Down
2 changes: 1 addition & 1 deletion .husky/pre-commit
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
npm run format:check
npm run format:fix
npm run format:check
npm run lint
git add .
25 changes: 25 additions & 0 deletions app/manifest.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
return {
name: "Job Junction",
short_name: "JJ",
description: "A Web App of job junction",
start_url: "/",
display: "standalone",
background_color: "#ffffff",
theme_color: "#000000",
icons: [
{
src: "/favicon/web-app-manifest-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "/favicon/web-app-manifest-512x512.png",
sizes: "512x512",
type: "image/png",
},
],
};
}
6 changes: 4 additions & 2 deletions components/Navbar/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
SheetTrigger,
} from "@/components/ui/sheet";
import GetNotification from "../GetNotification";
import PWAInstallButton from "@/components/PwaInstallBtn";

export default function Navbar() {
const session = useSession();
Expand All @@ -30,7 +31,7 @@ export default function Navbar() {
src={"/Images/jj-logo.png"}
width={500}
height={500}
className="w-12 rounded-md"
className="hidden w-12 rounded-md sm:block"
alt="JJ"
/>

Expand All @@ -40,7 +41,8 @@ export default function Navbar() {
</div>
</Link>

<div className="flex items-center gap-8">
<div className="flex items-center gap-4 md:gap-8">
<PWAInstallButton />
{session.status === "authenticated" ? (
<>
<GetNotification />
Expand Down
104 changes: 52 additions & 52 deletions components/PwaInstallBtn.tsx
Original file line number Diff line number Diff line change
@@ -1,30 +1,29 @@
"use client";

import { BeforeInstallPromptEvent } from "@/types/types";
import React, { useEffect, useState } from "react";
import { Download, Briefcase } from "lucide-react";
import { motion } from "framer-motion";
import { poppins } from "@/utils/fonts/font";
import Link from "next/link";
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { Download, Zap } from "lucide-react";
import Image from "next/image";
import { toast } from "sonner";

const PWAInstallButton = () => {
const [deferredEvent, setDeferredEvent] =
useState<BeforeInstallPromptEvent | null>(null);
const [installable, setInstallable] = useState<boolean>(false);

useEffect(() => {
const transferEvent = (e: BeforeInstallPromptEvent) => {
e.preventDefault();
setDeferredEvent(e);
setInstallable(true);
localStorage.setItem("pwaInstallable", "true");
};

const storedInstallable = localStorage.getItem("pwaInstallable");
if (storedInstallable === "true") {
setInstallable(true);
}

window.addEventListener("beforeinstallprompt", transferEvent);

return () => {
Expand All @@ -36,49 +35,50 @@ const PWAInstallButton = () => {
if (deferredEvent) {
deferredEvent.prompt();
setDeferredEvent(null);
setInstallable(false);
localStorage.removeItem("pwaInstallable");
} else {
toast.info("Install prompt is not available.", {
style: {
backgroundColor: "grey",
color: "white",
},
});
}
};

return (
<>
{installable ? (
<motion.div
className={`${poppins.className} text-md flex w-fit cursor-pointer items-center gap-4 rounded-md border-2 border-b-8 border-r-8 border-darkBg bg-white p-2 text-black hover:-translate-y-1 hover:bg-white`}
animate={{
opacity: [0, 1],
}}
transition={{
delay: 1,
}}
onClick={handleInstallClick}
>
<p>Get App</p>
<Download className="size-4" />
</motion.div>
) : (
<motion.div
animate={{
x: [300, 0],
opacity: [0, 1],
}}
transition={{
delay: 1,
}}
>
<Link
href={"/jobs/create"}
className="text-md flex w-full cursor-pointer gap-2 rounded-md border-2 border-b-8 border-r-8 border-darkBg bg-white p-2 font-bebas text-black hover:-translate-y-1 hover:bg-white"
aria-label="create-route"
>
<p>Post Job</p>

<Briefcase className="ml-2 size-6" />
</Link>
</motion.div>
)}
</>
<Drawer>
<DrawerTrigger className="text-2xl text-white">
<Zap />
</DrawerTrigger>
<DrawerContent className="mx-auto w-full pb-4 sm:w-3/4 md:w-1/2 lg:w-1/3">
<DrawerHeader>
<DrawerTitle className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Image
alt="jj-logo"
className="w-12 rounded-md border-2"
width={500}
height={500}
src={"/Images/jj-logo.png"}
/>
<p>Job Junction</p>
</div>
<Button
className="flex items-center gap-2 rounded-full bg-secondarySkyBlue text-center text-white hover:bg-secondarySkyBlue"
variant={"secondary"}
aria-label="pwa-install-button"
onClick={handleInstallClick}
>
<p>Install</p>
<Download className="size-4" />
</Button>
</DrawerTitle>
<DrawerDescription className="w-3/4 text-left">
Find your Next Opportunity With Job Junction
</DrawerDescription>
</DrawerHeader>
</DrawerContent>
</Drawer>
);
};

Expand Down
118 changes: 118 additions & 0 deletions components/ui/drawer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
"use client";

import * as React from "react";
import { Drawer as DrawerPrimitive } from "vaul";

import { cn } from "@/lib/utils";

const Drawer = ({
shouldScaleBackground = true,
...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
<DrawerPrimitive.Root
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
);
Drawer.displayName = "Drawer";

const DrawerTrigger = DrawerPrimitive.Trigger;

const DrawerPortal = DrawerPrimitive.Portal;

const DrawerClose = DrawerPrimitive.Close;

const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;

const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className,
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
DrawerContent.displayName = "DrawerContent";

const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
{...props}
/>
);
DrawerHeader.displayName = "DrawerHeader";

const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
{...props}
/>
);
DrawerFooter.displayName = "DrawerFooter";

const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className,
)}
{...props}
/>
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;

const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;

export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
};
Loading

0 comments on commit 768388b

Please sign in to comment.