diff --git a/src/app/(parent)/dashboard/page.tsx b/src/app/(parent)/dashboard/page.tsx index 143992f..09063c1 100644 --- a/src/app/(parent)/dashboard/page.tsx +++ b/src/app/(parent)/dashboard/page.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { api } from '@/trpc/server'; import ChildrenFilter from '@/components/children/children-filter'; import dynamic from 'next/dynamic'; -import ChildModel from '@/lib/models/child'; +import { MapViewTypeSelector } from '@/components/maps/map-viewtype-selector'; const Dashboard = async () => { const kids = await api.child.mine.query(); @@ -10,10 +10,11 @@ const Dashboard = async () => { ssr: false, }); return
-
+
+
-
+
; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5f3c0a7..c623c36 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,24 +1,25 @@ -import "@/styles/globals.css"; +import '@/styles/globals.css'; -import { Inter } from "next/font/google"; -import { cookies } from "next/headers"; +import { ABeeZee as TheFont } from 'next/font/google'; +import { cookies } from 'next/headers'; -import { TRPCReactProvider } from "@/trpc/react"; -import { ThemeProvider } from "@/components/providers/theme-provider"; -import { type Metadata } from "next"; -import NextAuthProvider from "@/lib/services/auth/provider"; +import { TRPCReactProvider } from '@/trpc/react'; +import { ThemeProvider } from '@/components/providers/theme-provider'; +import { type Metadata } from 'next'; +import NextAuthProvider from '@/lib/services/auth/provider'; -const inter = Inter({ - subsets: ["latin"], - variable: "--font-sans", +const inter = TheFont({ + weight: '400', + subsets: ['latin'], + variable: '--font-sans', }); export const metadata: Metadata = { - title: "ParentGrine Falcon", - description: "Laser focused on your kids", - manifest: "/site.webmanifest", + title: 'ParentGrine Falcon', + description: 'Laser focused on your kids', + manifest: '/site.webmanifest', icons: { - icon: "/favicon.ico", + icon: '/favicon.ico', }, }; @@ -29,15 +30,15 @@ export default function RootLayout({ }) { return ( - - - - - {children} - - - - + + + + + {children} + + + + ); } diff --git a/src/components/icons.tsx b/src/components/icons.tsx index c8c209b..50d8568 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -19,7 +19,7 @@ import { Copy, Cable, Edit, - Edit2, Radar, PhoneCall, Smartphone, + Edit2, Radar, PhoneCall, Smartphone, Waypoints, LocateFixed, } from 'lucide-react'; export type Icon = LucideIcon; @@ -34,12 +34,14 @@ export const Icons = { device: Smartphone, edit: Edit, sun: SunMedium, + location: LocateFixed, login: LogIn, message: MessageCircleMore, mobile: TabletSmartphone, moon: Moon, presence: Radar, rocket: Rocket, + route: Waypoints, save: Save, spinner: Loader2, twitter: Twitter, diff --git a/src/components/maps/map-marker.tsx b/src/components/maps/map-marker.tsx index e431ad6..fe72167 100644 --- a/src/components/maps/map-marker.tsx +++ b/src/components/maps/map-marker.tsx @@ -41,46 +41,46 @@ const MapMarker: React.FC = ( setPosition([ping.location.latitude, ping.location.longitude]); }, }); - return - - - -
- - - {getInitials(childName)} - -
-
{childName}
-
-
- {deviceName} + return
+ + + + +
+ + + {getInitials(childName)} + +
+
{childName}
+
+
+ {deviceName} +
-
- - -
- Last seen - {timestamp.toLocaleDateString() + ' ' + timestamp.toLocaleTimeString()} -
- - - - - - - - - - - - ; - ; - ; + + +
+ Last seen - {timestamp.toLocaleDateString() + ' ' + timestamp.toLocaleTimeString()} +
+ + + + + + + + + + + + +
; }; export default MapMarker; diff --git a/src/components/maps/map-viewtype-selector.tsx b/src/components/maps/map-viewtype-selector.tsx new file mode 100644 index 0000000..fff1aa6 --- /dev/null +++ b/src/components/maps/map-viewtype-selector.tsx @@ -0,0 +1,21 @@ +'use client'; +import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'; +import { Icons } from '@/components/icons'; +import React from 'react'; + + +export const MapViewTypeSelector = () => { + const [currentView, setCurrentView] = React.useState('location'); + return ( + setCurrentView(value)}> + + + Location + + + + Route + + ); +}; diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx index e9bde17..4bc2e98 100644 --- a/src/components/ui/radio-group.tsx +++ b/src/components/ui/radio-group.tsx @@ -1,10 +1,10 @@ -"use client" +'use client'; -import * as React from "react" -import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" -import { Circle } from "lucide-react" +import * as React from 'react'; +import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; +import { Circle } from 'lucide-react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; const RadioGroup = React.forwardRef< React.ElementRef, @@ -12,13 +12,13 @@ const RadioGroup = React.forwardRef< >(({ className, ...props }, ref) => { return ( - ) -}) -RadioGroup.displayName = RadioGroupPrimitive.Root.displayName + ); +}); +RadioGroup.displayName = RadioGroupPrimitive.Root.displayName; const RadioGroupItem = React.forwardRef< React.ElementRef, @@ -28,8 +28,8 @@ const RadioGroupItem = React.forwardRef< @@ -37,8 +37,8 @@ const RadioGroupItem = React.forwardRef< - ) -}) -RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName + ); +}); +RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName; -export { RadioGroup, RadioGroupItem } +export { RadioGroup, RadioGroupItem };