Sacha Weatherstone
4 years ago
54 changed files with 403 additions and 255 deletions
@ -15,13 +15,14 @@ specifiers: |
|||
'@vitejs/plugin-react': ^1.2.0 |
|||
autoprefixer: ^10.4.2 |
|||
base64-js: ^1.5.1 |
|||
framer-motion: ^6.2.6 |
|||
framer-motion: ^6.2.7 |
|||
gzipper: ^7.0.0 |
|||
mapbox-gl: ^2.7.0 |
|||
postcss: ^8.4.6 |
|||
prettier: ^2.5.1 |
|||
react: ^17.0.2 |
|||
react-dom: ^17.0.2 |
|||
react-draggable: ^4.4.4 |
|||
react-error-boundary: ^3.1.4 |
|||
react-flow-renderer: ^10.0.0-next.39 |
|||
react-hook-form: ^7.27.1 |
|||
@ -53,11 +54,12 @@ dependencies: |
|||
'@reduxjs/toolkit': 1.7[email protected][email protected] |
|||
'@tippyjs/react': 4.2[email protected][email protected] |
|||
base64-js: 1.5.1 |
|||
framer-motion: 6.2.6[email protected][email protected] |
|||
framer-motion: 6.2.7[email protected][email protected] |
|||
mapbox-gl: 2.7.0 |
|||
prettier: 2.5.1 |
|||
react: 17.0.2 |
|||
react-dom: 17.0[email protected] |
|||
react-draggable: 4.4[email protected][email protected] |
|||
react-error-boundary: 3.1[email protected] |
|||
react-flow-renderer: 10.0.0-[email protected][email protected] |
|||
react-hook-form: 7.27[email protected] |
|||
@ -3448,8 +3450,8 @@ packages: |
|||
resolution: {integrity: sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==} |
|||
dev: true |
|||
|
|||
/framer-motion/6.2.6[email protected][email protected]: |
|||
resolution: {integrity: sha512-7eGav5MxEEzDHozQTDY6+psTIOw2i2kM1QVoJOC3bCp9VOKoo+mKR5n7aT5JPh7ksEKFYJYz0GJDils/9S+oLA==} |
|||
/framer-motion/6.2.7[email protected][email protected]: |
|||
resolution: {integrity: sha512-RExmZCFpJ3OCakoXmZz8iW8ZI5MoaHmVadydetvTSrNaKmZ7ZC/JDQpNyw1NoDG+fchRGP86lXoiTFSQuin+Cg==} |
|||
peerDependencies: |
|||
react: '>=16.8 || ^17.0.0 || ^18.0.0' |
|||
react-dom: '>=16.8 || ^17.0.0 || ^18.0.0' |
|||
|
|||
@ -1,12 +1,13 @@ |
|||
import React from 'react'; |
|||
import type React from 'react'; |
|||
import { createContext } from 'react'; |
|||
|
|||
import type mapbox from 'mapbox-gl'; |
|||
import type { Map } from 'mapbox-gl'; |
|||
|
|||
export interface MapboxContextValue { |
|||
ref: React.Ref<HTMLDivElement>; |
|||
map?: mapbox.Map; |
|||
map?: Map; |
|||
} |
|||
|
|||
export const MapboxContext = React.createContext<MapboxContextValue>( |
|||
export const MapboxContext = createContext<MapboxContextValue>( |
|||
{} as MapboxContextValue, |
|||
); |
|||
|
|||
@ -1,21 +1,56 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { m } from 'framer-motion'; |
|||
import Draggable from 'react-draggable'; |
|||
|
|||
export interface CardProps { |
|||
className?: string; |
|||
title?: string; |
|||
actions?: React.ReactNode; |
|||
children: React.ReactNode; |
|||
border?: boolean; |
|||
draggable?: boolean; |
|||
} |
|||
|
|||
export const Card = ({ className, children }: CardProps): JSX.Element => { |
|||
export const Card = ({ |
|||
className, |
|||
title, |
|||
actions, |
|||
draggable, |
|||
border, |
|||
children, |
|||
}: CardProps): JSX.Element => { |
|||
return ( |
|||
<m.div |
|||
className={`flex select-none rounded-md bg-white p-4 shadow-md dark:bg-primaryDark ${className}`} |
|||
initial={{ opacity: 0 }} |
|||
animate={{ opacity: 1 }} |
|||
exit={{ opacity: 0 }} |
|||
> |
|||
{children} |
|||
</m.div> |
|||
<Draggable handle=".handle" disabled={!draggable}> |
|||
<div |
|||
className={`flex h-full w-full flex-col rounded-md shadow-md ${ |
|||
border ? 'border border-gray-300 dark:border-gray-600' : '' |
|||
} ${className ?? ''}`}
|
|||
> |
|||
{(title || actions) && ( |
|||
<div |
|||
className={`w-full select-none justify-between rounded-t-md border-b border-gray-300 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-primaryDark dark:text-white ${ |
|||
draggable ? 'cursor-move' : '' |
|||
}`}
|
|||
> |
|||
<div className="handle flex h-8 justify-between"> |
|||
<div className="my-auto ml-2 truncate">{title}</div> |
|||
{actions} |
|||
</div> |
|||
</div> |
|||
)} |
|||
|
|||
<m.div |
|||
className={`flex flex-grow select-none flex-col gap-4 p-4 ${ |
|||
title || actions ? 'rounded-b-md backdrop-blur-xl' : 'rounded-md' |
|||
} ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
|
|||
initial={{ opacity: 0 }} |
|||
animate={{ opacity: 1 }} |
|||
exit={{ opacity: 0 }} |
|||
> |
|||
{children} |
|||
</m.div> |
|||
</div> |
|||
</Draggable> |
|||
); |
|||
}; |
|||
|
|||
@ -1,8 +1,8 @@ |
|||
import React from 'react'; |
|||
import { useContext } from 'react'; |
|||
|
|||
import type { MapboxContextValue } from '@components/MapBox/mapboxContext'; |
|||
import { MapboxContext } from '@components/MapBox/mapboxContext'; |
|||
|
|||
export const useMapbox = (): MapboxContextValue => { |
|||
return React.useContext(MapboxContext); |
|||
return useContext(MapboxContext); |
|||
}; |
|||
|
|||
Loading…
Reference in new issue