cant remember

This commit is contained in:
Gabriel Brown 2024-09-01 20:31:09 -05:00
parent cb00826b16
commit 3272c83f09
7 changed files with 188 additions and 31 deletions

View File

@ -21,6 +21,7 @@
"@hookform/resolvers": "^3.9.0", "@hookform/resolvers": "^3.9.0",
"@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-alert-dialog": "^1.1.1",
"@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-label": "^2.1.0", "@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-navigation-menu": "^1.2.0",
@ -49,6 +50,7 @@
"sonner": "^1.5.0", "sonner": "^1.5.0",
"tailwind-merge": "^2.4.0", "tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.1",
"zod": "^3.23.8" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {

View File

@ -20,6 +20,9 @@ importers:
'@radix-ui/react-avatar': '@radix-ui/react-avatar':
specifier: ^1.1.0 specifier: ^1.1.0
version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-dialog':
specifier: ^1.1.1
version: 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-dropdown-menu': '@radix-ui/react-dropdown-menu':
specifier: ^2.1.1 specifier: ^2.1.1
version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) version: 2.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@ -104,6 +107,9 @@ importers:
tailwindcss-animate: tailwindcss-animate:
specifier: ^1.0.7 specifier: ^1.0.7
version: 1.0.7(tailwindcss@3.4.9(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4))) version: 1.0.7(tailwindcss@3.4.9(ts-node@10.9.2(@types/node@20.14.14)(typescript@5.5.4)))
vaul:
specifier: ^0.9.1
version: 0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
zod: zod:
specifier: ^3.23.8 specifier: ^3.23.8
version: 3.23.8 version: 3.23.8
@ -3101,6 +3107,12 @@ packages:
v8-compile-cache-lib@3.0.1: v8-compile-cache-lib@3.0.1:
resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==} resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
vaul@0.9.1:
resolution: {integrity: sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==}
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
which-boxed-primitive@1.0.2: which-boxed-primitive@1.0.2:
resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==} resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
@ -6116,6 +6128,15 @@ snapshots:
v8-compile-cache-lib@3.0.1: {} v8-compile-cache-lib@3.0.1: {}
vaul@0.9.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
react: 18.3.1
react-dom: 18.3.1(react@18.3.1)
transitivePeerDependencies:
- '@types/react'
- '@types/react-dom'
which-boxed-primitive@1.0.2: which-boxed-primitive@1.0.2:
dependencies: dependencies:
is-bigint: 1.0.4 is-bigint: 1.0.4

View File

@ -1,7 +1,7 @@
"use client" "use client"
import * as React from "react" import * as React from "react"
import { Calendar } from "~/components/ui/BillTrackerCalendar" import { Calendar } from "~/components/ui/BillTrackerCalendar"
import { Button } from "~/components/ui/button" import CreateBillForm from "~/components/billtracker/CreateBillForm"
export default function BillTrackerCalendar() { export default function BillTrackerCalendar() {
const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined) const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(undefined)
@ -39,7 +39,7 @@ export default function BillTrackerCalendar() {
}, []) }, [])
return ( return (
<div className="m-auto p-2 relative" ref={calendarRef}> <div className="m-auto p-2 relative mt-10" ref={calendarRef}>
<Calendar <Calendar
mode="single" mode="single"
selected={selectedDate} selected={selectedDate}
@ -49,21 +49,12 @@ export default function BillTrackerCalendar() {
{isOpen && selectedDate && ( {isOpen && selectedDate && (
<div <div
ref={popoverRef} ref={popoverRef}
className="absolute top-full left-1/2 transform -translate-x-1/2 border rounded-lg shadow-lg px-4 pb-4 w-80" className="absolute top-full left-1/2 transform -translate-x-1/2
border rounded-lg shadow-lg px-4 pb-4 w-80"
> >
<div className="grid gap-4"> <div className="grid gap-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex flex-row w-full"> < CreateBillForm date={selectedDate} setIsOpen={setIsOpen} />
<h3 className="font-medium leading-none text-center mx-auto mt-2 py-2 md:text-xl">
{selectedDate.toDateString()}
</h3>
<button className="justify-self-end ml-auto bg-none text-primary text-m md:text-xl"
onClick={() => setIsOpen(false)}
>
x
</button>
</div>
<p>Add your events or bills due here.</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,27 @@
import React from "react";
type CreateBillFormProps = {
date: Date;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
// Create Bill Form. Get date from calendar
export default function CreateBillForm({date, setIsOpen}: CreateBillFormProps) {
return (
<div>
<div className="flex flex-row w-full">
<h3 className="font-medium leading-none
text-center mx-auto mt-2 py-2 md:text-xl">
{date.toDateString()}
</h3>
<button className="justify-self-end ml-auto bg-none
text-primary text-m md:text-xl"
onClick={() => setIsOpen(false)}
>
x
</button>
</div>
<h1>Create Bill</h1>
</div>
);
}

View File

@ -1,5 +1,6 @@
import { Outfit as FontSans } from "next/font/google"; import { Outfit as FontSans } from "next/font/google";
import { cn } from "~/lib/utils" import { cn } from "~/lib/utils"
import Link from "next/link"
const fontSans = FontSans({ const fontSans = FontSans({
subsets: ["latin"], subsets: ["latin"],
@ -8,6 +9,7 @@ const fontSans = FontSans({
export default function Hero() { export default function Hero() {
return ( return (
<Link href="/">
<div className="flex flex-col justify-start items-start"> <div className="flex flex-col justify-start items-start">
<h1 className={cn("text-4xl md:text-5xl lg:text-6xl font-bold text-center font-sans antialiased", <h1 className={cn("text-4xl md:text-5xl lg:text-6xl font-bold text-center font-sans antialiased",
fontSans.variable)} fontSans.variable)}
@ -20,5 +22,6 @@ export default function Hero() {
PORTAL PORTAL
</h1> </h1>
</div> </div>
</Link>
); );
}; };

View File

@ -17,11 +17,6 @@ export default function Nav_Bar() {
"py-6 text-lg md:text-xl lg:text-2xl font-semibold font-sans antialiased", fontSans.variable)} "py-6 text-lg md:text-xl lg:text-2xl font-semibold font-sans antialiased", fontSans.variable)}
> >
<Card className="md:p-4"> <Card className="md:p-4">
<CardContent className="py-4">
<Link href="/">
Dashboard
</Link>
</CardContent>
<CardContent className="py-4"> <CardContent className="py-4">
<Link href="/"> <Link href="/">
Make Payment Make Payment

View File

@ -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,
}