-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
17 changed files
with
266 additions
and
105 deletions.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| 'use client'; | ||
|
|
||
| import { Share, PlusSquare } from 'lucide-react'; | ||
| import Image from 'next/image'; | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from '@/components/ui/dialog'; | ||
|
|
||
| export const InstallDialog = () => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| // Check if we're on mobile and not in standalone mode | ||
| const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); | ||
| const isStandalone = window.matchMedia( | ||
| '(display-mode: standalone)' | ||
| ).matches; | ||
|
|
||
| if (isMobile && !isStandalone) { | ||
| setIsOpen(true); | ||
| } | ||
| }, []); | ||
|
|
||
| return ( | ||
| <Dialog open={isOpen} onOpenChange={setIsOpen}> | ||
| <DialogContent> | ||
| <div className="mx-auto w-full max-w-sm"> | ||
| <DialogHeader className="mb-6"> | ||
| <div className="my-4 flex justify-center"> | ||
| <Image | ||
| src="/icons/icon-192x192.png" | ||
| alt="Foil App Icon" | ||
| width={72} | ||
| height={72} | ||
| className="rounded-2xl border border-border shadow-lg" | ||
| /> | ||
| </div> | ||
| <DialogTitle className="text-center text-2xl"> | ||
| Install Foil | ||
| </DialogTitle> | ||
| <DialogDescription> | ||
| Add the app to your home screen | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className="space-y-4 rounded-lg bg-muted px-4 py-8 text-center"> | ||
| <div className="space-y-2"> | ||
| <p className="text-lg"> | ||
| Tap the{' '} | ||
| <span className="mx-0.5 inline-flex translate-y-[3px] items-center"> | ||
| <Share className="h-5 w-5" /> | ||
| </span>{' '} | ||
| share icon in your browser | ||
| </p> | ||
| </div> | ||
| <div className="space-y-2"> | ||
| <p className="text-lg"> | ||
| Select{' '} | ||
| <span className="mx-0.5 inline-flex translate-y-[3px] items-center"> | ||
| <PlusSquare className="h-5 w-5" /> | ||
| </span>{' '} | ||
| Add to Home Screen | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| }; |
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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file was deleted.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | ||
| '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(({ className, ...props }: any, 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( | ||
| ({ className, children, ...props }: any, 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(({ className, ...props }: any, 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( | ||
| ({ className, ...props }: any, 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, | ||
| }; |
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
Oops, something went wrong.