diff --git a/nextjs/components.json b/nextjs/components.json index 53e16a6ca..8c574b77e 100644 --- a/nextjs/components.json +++ b/nextjs/components.json @@ -6,7 +6,7 @@ "tailwind": { "config": "tailwind.config.ts", "css": "src/app/globals.css", - "baseColor": "meepGray", + "baseColor": "slate", "cssVariables": true, "prefix": "" }, @@ -14,4 +14,4 @@ "components": "@/components", "utils": "@/lib/utils" } -} +} \ No newline at end of file diff --git a/nextjs/next.config.js b/nextjs/next.config.js new file mode 100644 index 000000000..83ec25334 --- /dev/null +++ b/nextjs/next.config.js @@ -0,0 +1,10 @@ +module.exports = { + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'www.localintelligencehub.com', + }, + ], + }, + } \ No newline at end of file diff --git a/nextjs/package-lock.json b/nextjs/package-lock.json index 434b2478c..e4651731c 100644 --- a/nextjs/package-lock.json +++ b/nextjs/package-lock.json @@ -12,7 +12,9 @@ "@apollo/experimental-nextjs-app-support": "^0.8.0", "@hookform/resolvers": "^3.3.4", "@parcel/watcher": "^2.4.1", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", @@ -22,6 +24,8 @@ "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toggle": "^1.0.3", + "@radix-ui/react-toggle-group": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.7", "@tanstack/react-table": "^8.13.2", "@types/date-fns": "^2.6.0", "class-variance-authority": "^0.7.0", @@ -3169,6 +3173,37 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-accordion": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz", + "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collapsible": "1.0.3", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-alert-dialog": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz", @@ -3220,6 +3255,36 @@ } } }, + "node_modules/@radix-ui/react-checkbox": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz", + "integrity": "sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-use-size": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-collapsible": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz", @@ -3814,6 +3879,69 @@ } } }, + "node_modules/@radix-ui/react-toggle-group": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz", + "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-toggle": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", + "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", @@ -3937,6 +4065,29 @@ } } }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", + "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/rect": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", diff --git a/nextjs/package.json b/nextjs/package.json index 1a1b95755..d6f0a7979 100644 --- a/nextjs/package.json +++ b/nextjs/package.json @@ -16,7 +16,9 @@ "@apollo/experimental-nextjs-app-support": "^0.8.0", "@hookform/resolvers": "^3.3.4", "@parcel/watcher": "^2.4.1", + "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", + "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", @@ -26,6 +28,8 @@ "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toggle": "^1.0.3", + "@radix-ui/react-toggle-group": "^1.0.4", + "@radix-ui/react-tooltip": "^1.0.7", "@tanstack/react-table": "^8.13.2", "@types/date-fns": "^2.6.0", "class-variance-authority": "^0.7.0", diff --git a/nextjs/src/app/external-data-source-updates/ExternalDataSourceUpdates.tsx b/nextjs/src/app/external-data-source-updates/ExternalDataSourceUpdates.tsx index 351b350bd..b9e39d63d 100644 --- a/nextjs/src/app/external-data-source-updates/ExternalDataSourceUpdates.tsx +++ b/nextjs/src/app/external-data-source-updates/ExternalDataSourceUpdates.tsx @@ -46,7 +46,7 @@ export default function ExternalDataSourceUpdates() {
-

Active Syncs

+

Active Syncs

{loading ? (
diff --git a/nextjs/src/app/globals.css b/nextjs/src/app/globals.css index c8100447a..021054e93 100644 --- a/nextjs/src/app/globals.css +++ b/nextjs/src/app/globals.css @@ -16,15 +16,27 @@ } @font-face { - font-family: IBMPlexSans; + font-family: IBMPlexSansReg; src: url("../fonts/IBMPlexSans/IBMPlexSans-Regular.ttf"); } - +@font-face { + font-family: IBMPlexSansMedium; + src: url("../fonts/IBMPlexSans/IBMPlexSans-Medium.ttf"); +} +@font-face { + font-family: IBMPlexSansSemiBold; + src: url("../fonts/IBMPlexSans/IBMPlexSans-SemiBold.ttf"); +} @font-face { font-family: IBMPlexSansCondensed; src: url("../fonts/IBMPlexSans/IBMPlexSansCondensed-Regular.ttf"); } +@font-face { + font-family: IBMPlexMono; + src: url("../fonts/IBMPlexMono/IBMPlexMono-Regular.ttf"); +} + @layer base { :root { --meep-gray-100: 220, 14%, 96%; @@ -46,14 +58,14 @@ --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; + --primary: 222, 14%, 34%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary-foreground: 222, 14%, 34%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent-foreground: 222, 14%, 34%; --border: 0, 0%, 100%, 0.32; --brand: 222, 69%, 65%; @@ -75,7 +87,6 @@ body { @apply bg-meepGray-800 text-white font-IBMPlexSans; } - } @layer components { diff --git a/nextjs/src/app/reports/[id]/page.tsx b/nextjs/src/app/reports/[id]/page.tsx index 1cbf0af62..974c0c9a8 100644 --- a/nextjs/src/app/reports/[id]/page.tsx +++ b/nextjs/src/app/reports/[id]/page.tsx @@ -1,8 +1,14 @@ // page.js "use client"; -import Map from "react-map-gl"; +import { useState } from "react"; + + +import Map, { Marker, Popup } from "react-map-gl"; import "mapbox-gl/dist/mapbox-gl.css"; +import Pin from "@/components/Pin"; + + import { Card, CardContent, @@ -12,51 +18,165 @@ import { CardTitle, } from "@/components/ui/card" +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion" -import { BarChart3, Layers, LibraryBig } from "lucide-react" -import { Button } from "@/components/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" + +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { Checkbox } from "@/components/ui/checkbox" +import { BarChart3, Layers, LibraryBig, File, Plus, Wrench } from "lucide-react" +import { Button } from "@/components/ui/button" +import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" +import ReportsConsItem from "@/components/reportsConstituencyItem"; +import DataConfig from "@/components/dataConfig"; + export default function Home() { const mapboxToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN; + + const [isDataConfigOpen, setDataConfigOpen] = useState(false); + const toggleDataConfig = () => setDataConfigOpen(!isDataConfigOpen); + + const [isConsDataOpen, setConsDataOpen] = useState(false); + const toggleConsData = () => setConsDataOpen(!isConsDataOpen); + + let testLong = "-2.296605" + let testLat = "53.593349" + + + return (
+ + > + + + + +
+ TEST +
+ + + +
-
-
+
+
- - Main List + + Main List + + + + + + Report Settings + + Share + Invite + Delete + + + -
- - Data configuration -
-
- - Constituency data -
+ + + Data Configuration + + + Constituency Data + + + {isDataConfigOpen && ( + + + )} + {isConsDataOpen && ( + + + + + All Constituencies + Bury North + + + + + + + Change your password here. + + + + + + + )} +
diff --git a/nextjs/src/app/reports/page.tsx b/nextjs/src/app/reports/page.tsx index 8497cbfda..6876b938c 100644 --- a/nextjs/src/app/reports/page.tsx +++ b/nextjs/src/app/reports/page.tsx @@ -16,9 +16,10 @@ export default function Report() {
-

Active Syncs

+

Your reports

+ @@ -28,6 +29,7 @@ export default function Report() { Last Edited: 27 Feb 2024 + @@ -44,7 +46,7 @@ function PageHeader() { return (
-

Reports

+

Reports

Maximise your organisations impact by securely connecting your CRM platforms with Mapped and select from a range of data sources to enhance your membership lists.

diff --git a/nextjs/src/components/Pin.tsx b/nextjs/src/components/Pin.tsx new file mode 100644 index 000000000..b346a7a79 --- /dev/null +++ b/nextjs/src/components/Pin.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; + +const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3 + c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9 + C20.1,15.8,20.2,15.8,20.2,15.7z`; + + + +const pinStyle = { + cursor: 'pointer', + fill: '#678DE3', + stroke: 'none' +}; + +function Pin({ size = 30 }) { + return ( + + + + + ); +} + + + + + +export default React.memo(Pin); \ No newline at end of file diff --git a/nextjs/src/components/dataConfig.tsx b/nextjs/src/components/dataConfig.tsx new file mode 100644 index 000000000..3faf6bdb7 --- /dev/null +++ b/nextjs/src/components/dataConfig.tsx @@ -0,0 +1,147 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" + +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion" + +import { Button } from "@/components/ui/button" + +import { Checkbox } from "@/components/ui/checkbox" + +import { File, Plus } from "lucide-react" + + + + +interface Props { + +} + + + +const ReportsConsItem: React.FC = ({}) => { + + + return ( + + + Data Configuration + + + +
+ Your membership data +
+ +
+
+ +
+
+ +
+ Data Layers + + + Geographic + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ + + + Demographic + +
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+ + + + +
+ + + ) + // return some JSX +}; + + + +export default ReportsConsItem; + diff --git a/nextjs/src/components/reportsConstituencyItem.tsx b/nextjs/src/components/reportsConstituencyItem.tsx new file mode 100644 index 000000000..c19f3d11e --- /dev/null +++ b/nextjs/src/components/reportsConstituencyItem.tsx @@ -0,0 +1,90 @@ +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card" + +import Image from "next/image"; + +interface ConsProps { + id?: string; + consName: string; + firstIn2019: string; + secondIn2019: string; + mpName?: string; + mpImgUrl?: string | undefined; +} + + + +const ReportsConsItem: React.FC = ({ id, consName, firstIn2019, secondIn2019, mpName, mpImgUrl }) => { + + let first2019lowercase = firstIn2019.toLowerCase() + let second2019lowercase = secondIn2019.toLowerCase() + + + if (mpImgUrl === undefined) { + throw new Error("img is undefined!"); + } + + + return ( + <> + + + {consName} + + +
+
+

First in 2019

+
+
+

{firstIn2019}

+
+
+
+

Second in 2019

+
+
+

{secondIn2019}

+
+
+
+
+

Member of Parliment

+
+ +
+

{mpName}

+

{firstIn2019} Party

+ +
+
+ + + + + + ) + // return some JSX +}; + + + +export default ReportsConsItem; + + + + diff --git a/nextjs/src/components/ui/accordion.tsx b/nextjs/src/components/ui/accordion.tsx new file mode 100644 index 000000000..5794b3518 --- /dev/null +++ b/nextjs/src/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/nextjs/src/components/ui/button.tsx b/nextjs/src/components/ui/button.tsx index 72aadcca8..f1dbabd41 100644 --- a/nextjs/src/components/ui/button.tsx +++ b/nextjs/src/components/ui/button.tsx @@ -16,7 +16,7 @@ const buttonVariants = cva( outline: "border border-meepGray-600 bg-meepGray-800 hover:bg-accent hover:text-accent-foreground", secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", + "bg-secondary text-secondary-foreground hover:bg-secondary/80 ", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", reverse: diff --git a/nextjs/src/components/ui/card.tsx b/nextjs/src/components/ui/card.tsx index 61e737bff..2791e96bb 100644 --- a/nextjs/src/components/ui/card.tsx +++ b/nextjs/src/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export { Checkbox } diff --git a/nextjs/src/components/ui/toggle-group.tsx b/nextjs/src/components/ui/toggle-group.tsx new file mode 100644 index 000000000..b81ca1853 --- /dev/null +++ b/nextjs/src/components/ui/toggle-group.tsx @@ -0,0 +1,61 @@ +"use client" + +import * as React from "react" +import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" +import { VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" +import { toggleVariants } from "@/components/ui/toggle" + +const ToggleGroupContext = React.createContext< + VariantProps +>({ + size: "default", + variant: "default", +}) + +const ToggleGroup = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, size, children, ...props }, ref) => ( + + + {children} + + +)) + +ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName + +const ToggleGroupItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, children, variant, size, ...props }, ref) => { + const context = React.useContext(ToggleGroupContext) + + return ( + + {children} + + ) +}) + +ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName + +export { ToggleGroup, ToggleGroupItem } diff --git a/nextjs/src/components/ui/toggle.tsx b/nextjs/src/components/ui/toggle.tsx index e5a176980..f47f68715 100644 --- a/nextjs/src/components/ui/toggle.tsx +++ b/nextjs/src/components/ui/toggle.tsx @@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const toggleVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-meepGray-800 transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", + "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-meepGray-800 transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-meepGray-700 data-[state=on]:text-meepGray-200", { variants: { variant: { diff --git a/nextjs/src/components/ui/tooltip.tsx b/nextjs/src/components/ui/tooltip.tsx new file mode 100644 index 000000000..30fc44d90 --- /dev/null +++ b/nextjs/src/components/ui/tooltip.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" + +import { cn } from "@/lib/utils" + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/nextjs/src/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf b/nextjs/src/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf new file mode 100644 index 000000000..81ca3dcc9 Binary files /dev/null and b/nextjs/src/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf differ diff --git a/nextjs/tailwind.config.ts b/nextjs/tailwind.config.ts index b89c6ec7d..6976f2aa4 100644 --- a/nextjs/tailwind.config.ts +++ b/nextjs/tailwind.config.ts @@ -19,19 +19,28 @@ const config = { }, extend: { fontFamily: { - 'IBMPlexSans': ["IBMPlexSans", 'sans-serif'], + 'IBMPlexSans': ["IBMPlexSansReg", 'sans-serif'], + 'IBMPlexSansSemiBold': ["IBMPlexSansSemiBold", 'sans-serif'], + 'IBMPlexSansMedium': ["IBMPlexSansMedium", 'sans-serif'], 'IBMPlexSansCondensed': ["IBMPlexSansCondensed", 'sans-serif'], - 'IBMPlexMono': ['"IBM Plex Mono", sans-serif'], + 'IBMPlexMono': ["IBMPlexMono", 'sans-serif'], 'PPRightGrotesk': ['PPRightGrotesk, sans-serif'], + }, fontSize: { hXlg: ['73.488px', { lineHeight: '107%', }], hLg: ['36px', { - lineHeight: '47px', - letterSpacing: '0em', + lineHeight: '100%', fontWeight: '700', + + }], + hLgPP: ['36px', { + lineHeight: '100%', + fontWeight: '700', + letterSpacing: '0.05rem' + }], hMd: ['21px', { lineHeight: 'normal',