diff --git a/apps/public/src/app/pricing.tsx b/apps/public/src/app/pricing.tsx
new file mode 100644
index 00000000..7bb904cd
--- /dev/null
+++ b/apps/public/src/app/pricing.tsx
@@ -0,0 +1,72 @@
+import { CheckIcon } from 'lucide-react';
+
+import { Heading2, Lead2 } from './copy';
+
+export function Pricing() {
+ return (
+
+
+
+
+ Simple, transparent pricing
+
+ Everything is included, just decide how many events you want to
+ track each month.
+
+
+
+
+
+ What's included for{' '}
+ all plans
+
+
+ -
+ Unlimited websites/apps
+
+ -
+ Unlimited Users
+
+
+ -
+ Unlimted dashboards
+
+ -
+ Unlimted charts
+
+ -
+ Unlimted tracked
+ profiles
+
+ -
+ Yes, its that simple
+
+
+
+
+
+
+ From
+
+
$10
+
+ billed monthly
+
+
+ {/*
+ Get Started
+ */}
+
+
+
+ Exact pricing will come soon, but we asure you, it will be cheaper
+ than the competition.
+
+
During beta everything is free!
+
+
+
+ );
+}
diff --git a/apps/public/src/app/punch-lines.tsx b/apps/public/src/app/punch-lines.tsx
new file mode 100644
index 00000000..d9523d1c
--- /dev/null
+++ b/apps/public/src/app/punch-lines.tsx
@@ -0,0 +1,141 @@
+import { cn } from '@/utils/cn';
+import type { LucideIcon, LucideProps } from 'lucide-react';
+import {
+ ClockIcon,
+ CloudIcon,
+ CookieIcon,
+ DollarSignIcon,
+ HandshakeIcon,
+ KeyIcon,
+} from 'lucide-react';
+import Image from 'next/image';
+
+import { Heading2, Heading3, Heading4 } from './copy';
+
+const items = [
+ {
+ title: 'Own Your Own Data',
+ description: (
+
+ All our serveres are hosted in EU (Stockholm) and we are fully GDPR
+ compliant.
+
+ ),
+ icon: KeyIcon,
+ color: '#2563EB',
+ className: 'bg-blue-light',
+ },
+ {
+ title: 'Cloud or Self-Hosting',
+ description: (
+
+ Choose between the flexibility of cloud-based hosting or the autonomy of
+ self-hosting to tailor your analytics infrastructure to your needs.
+
+ ),
+ icon: CloudIcon,
+ color: '#ff7557',
+ className: '', // 'bg-[#ff7557]',
+ },
+ {
+ title: 'Real-Time Events',
+ description: (
+
+ Stay up-to-date with real-time event tracking, enabling instant insights
+ into user actions as they happen.
+
+ ),
+ icon: ClockIcon,
+ color: '#7fe1d8',
+ className: '', // bg-[#7fe1d8]
+ },
+ {
+ title: 'No cookies!',
+ description: (
+
+ Our trackers are cookie-free, skip that annyoing cookie consent banner!
+
+ ),
+ icon: CookieIcon,
+ color: '#f8bc3c',
+ className: 'bg-blue-dark', //'bg-[#f8bc3c]',
+ },
+ {
+ title: 'Cost-Effective',
+ description: (
+
+ We have combined the best from Mixpanel and Plausible. Cut the costs and
+ keep the features.
+
+ ),
+ icon: DollarSignIcon,
+ color: '#0f7ea0',
+ className: 'bg-[#3ba974]',
+ },
+ {
+ title: 'Predictable pricing',
+ description: (
+
You only pay for events, everything else is included. No surprises.
+ ),
+ icon: HandshakeIcon,
+ color: '#0f7ea0',
+ className: 'bg-[#3ba974]',
+ },
+ {
+ title: 'First Class React Native Support',
+ description: (
+
+ Our SDK is built with React Native in mind, making it easy to integrate
+ with your mobile apps.
+
+ ),
+ icon: (({ className }: LucideProps) => {
+ return (
+
+ );
+ }) as unknown as LucideIcon,
+ color: '#3ba974',
+ className: 'bg-[#e19900]',
+ },
+];
+
+export function PunchLines() {
+ return (
+
+
+ Not convinced?
+
+
+
+ {items.map((item) => {
+ const Icon = item.icon;
+ return (
+
+
+
+
+
{item.title}
+
{item.description}
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/apps/public/src/app/section.tsx b/apps/public/src/app/section.tsx
deleted file mode 100644
index c2b81848..00000000
--- a/apps/public/src/app/section.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-'use client';
-
-import { cn } from '@/utils/cn';
-import type { LucideIcon, LucideProps } from 'lucide-react';
-import {
- ArrowUpFromDotIcon,
- BarChart2Icon,
- BellIcon,
- BookmarkIcon,
- CheckCircle,
- ClockIcon,
- CloudIcon,
- CloudLightningIcon,
- CompassIcon,
- ConeIcon,
- DatabaseIcon,
- DollarSignIcon,
- DownloadIcon,
- FilterIcon,
- FolderIcon,
- HandCoinsIcon,
- HandshakeIcon,
- KeyIcon,
- PieChartIcon,
- RouteIcon,
- ServerIcon,
- ShieldPlusIcon,
- ShoppingCartIcon,
- StarIcon,
- ThumbsUpIcon,
- TrendingUpIcon,
- UserRoundSearchIcon,
- UsersIcon,
- WebhookIcon,
-} from 'lucide-react';
-
-import { Widget } from './widget';
-
-interface SectionItem {
- title: string;
- description: string | React.ReactNode;
- icon: LucideIcon;
- color: string;
- soon?: string;
- icons: LucideIcon[];
- className: string;
-}
-
-const sections: SectionItem[] = [
- {
- title: 'Own Your Own Data',
- description: (
- <>
-
- Take control of your data privacy and ownership with our platform,
- ensuring full transparency and security.
-
-
- All our serveres are hosted in EU (Stockholm) and we are fully GDPR
- compliant.
-
-
- ),
- icon: KeyIcon,
- color: '#2563EB',
- icons: [FolderIcon, DatabaseIcon, ShieldPlusIcon, KeyIcon],
- className: 'bg-blue-light',
- },
- {
- title: 'Cloud or Self-Hosting',
- description: (
-
- Choose between the flexibility of cloud-based hosting or the autonomy of
- self-hosting to tailor your analytics infrastructure to your needs.
-
- ),
- icon: CloudIcon,
- color: '#ff7557',
- icons: [CloudIcon, CheckCircle, ServerIcon, DownloadIcon],
- className: '', // 'bg-[#ff7557]',
- },
- {
- title: 'Real-Time Events',
- description: (
-
- Stay up-to-date with real-time event tracking, enabling instant insights
- into user actions as they happen.
-
- ),
- icon: ClockIcon,
- color: '#7fe1d8',
- icons: [CloudLightningIcon, ShoppingCartIcon, ArrowUpFromDotIcon],
- className: '', // bg-[#7fe1d8]
- },
- {
- title: 'Deep Dive into User Behaviors',
- description: (
-
- Gain profound insights into user behavior with comprehensive analytics
- tools, allowing you to understand your audience's actions and
- preferences.
-
- ),
- icon: UserRoundSearchIcon,
- color: '#f8bc3c',
- icons: [UsersIcon, RouteIcon, BookmarkIcon],
- className: 'bg-blue-dark', //'bg-[#f8bc3c]',
- },
- {
- title: 'Powerful Report Explorer',
- description: (
-
- Explore and analyze your data effortlessly with our powerful report
- explorer, simplifying the process of deriving meaningful insights.
-
- ),
- icon: CompassIcon,
- color: '#b3596e',
- icons: [ThumbsUpIcon, TrendingUpIcon, PieChartIcon, BarChart2Icon],
- className: 'bg-[#ff7557]',
- },
- {
- soon: 'Coming soon',
- title: 'Funnels',
- description: (
-
- Track user conversion funnels seamlessly, providing valuable insights
- into user journey optimization.
-
- ),
- icon: ConeIcon,
- color: '#72bef4',
- icons: [ConeIcon, FilterIcon],
- className: '', //'bg-[#72bef4]',
- },
- {
- soon: 'Coming with our native app',
- title: 'Push Notifications',
- description: (
-
- Stay informed about conversions, events, and peaks with our upcoming
- push notification tool, empowering you to monitor and respond to
- critical activities in real-time.
-
- ),
- icon: BellIcon,
- color: '#ffb27a',
- icons: [WebhookIcon, BellIcon],
- className: '', //'bg-[#ffb27a]',
- },
- {
- title: 'Cost-Effective Alternative to Mixpanel',
- description: (
-
- Enjoy the same powerful analytics capabilities as Mixpanel at a fraction
- of the cost, ensuring affordability without compromising on quality.
-
- ),
- icon: DollarSignIcon,
- color: '#0f7ea0',
- icons: [DollarSignIcon, HandCoinsIcon, HandshakeIcon, StarIcon],
- className: 'bg-[#3ba974]',
- },
- {
- soon: 'Something Plausible lacks',
- title: 'Great Support for React Native',
- description: (
-
- Benefit from robust support for React Native, ensuring seamless
- integration and compatibility for your projects, a feature notably
- lacking in other platforms like Plausible.
-
- ),
- icon: (({ className }: LucideProps) => {
- return (
-
- );
- }) as unknown as LucideIcon,
- color: '#3ba974',
- icons: [FolderIcon, DatabaseIcon, ShieldPlusIcon, KeyIcon],
- className: 'bg-[#e19900]',
- },
-];
-
-// To lazy to think now...
-function checkIndex(index: number) {
- switch (index) {
- case 0:
- case 3:
- case 4:
- case 7:
- case 8:
- case 10:
- return true;
- default:
- return false;
- }
-}
-
-export function Sections() {
- return (
- <>
-
- {sections.map((section, i) => {
- const even = checkIndex(i);
-
- const offsets = even
- ? [
- '-top-10 -left-10 rotate-12',
- 'top-10 -rotate-12',
- '-right-5',
- '-right-10 -top-20',
- ]
- : ['-top-10 -left-20 rotate-12', 'top-10 -rotate-12', '-right-5'];
-
- const className = even
- ? cn('[&_*]:text-white/90 col-span-2', section.className)
- : cn('border border-border', section.className);
-
- return (
-
- {section.description}
-
- );
- })}
-
-
- );
-}
diff --git a/apps/public/src/app/social-proof/index.tsx b/apps/public/src/app/social-proof/index.tsx
index f0eef0ba..d651c1b9 100644
--- a/apps/public/src/app/social-proof/index.tsx
+++ b/apps/public/src/app/social-proof/index.tsx
@@ -11,7 +11,7 @@ export async function SocialProofServer(props: Props) {
const waitlistCount = await db.waitlist.count();
return (
- ;
+
);
}
diff --git a/apps/public/src/app/social-proof/social-proof.tsx b/apps/public/src/app/social-proof/social-proof.tsx
index 91770700..746d4e63 100644
--- a/apps/public/src/app/social-proof/social-proof.tsx
+++ b/apps/public/src/app/social-proof/social-proof.tsx
@@ -1,21 +1,12 @@
'use client';
-import { useEffect, useState } from 'react';
-import { Button } from '@/components/ui/button';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from '@/components/ui/dialog';
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { cn } from '@/utils/cn';
+// import { StarIcon } from 'lucide-react';
import Image from 'next/image';
interface JoinWaitlistProps {
@@ -25,15 +16,15 @@ interface JoinWaitlistProps {
export function SocialProof({ className, count }: JoinWaitlistProps) {
return (
-
+
@@ -44,8 +35,8 @@ export function SocialProof({ className, count }: JoinWaitlistProps) {
@@ -56,17 +47,27 @@ export function SocialProof({ className, count }: JoinWaitlistProps) {
KiddoKitchen is here
-
- {count} early birds have already signed up! 🚀
-
+
+
{count} early birds have signed up! 🚀
+ {/*
+
+
+
+
+
+
*/}
+
);
}
+
+//
What users think
“ Been a long time Mixpanel user and without a doubt there's a bunch of room to innovate. I'm confident Openpanel is on the right path! ”
“ I have used Openpanel for the last 6 months (since I’m the creator) for 3 different sites/apps. It’s a great analytics product that has everything you need. Still lacking a native app but will work hard to make that a reality! ”
“ would be cool if it was easier to edit text after image is generated ”
“ Awesome product, very easy to use and understand. I miss a native app and the documentation could be improved. Otherwise I love it. ”
“ I have used Open panel since the private beta and i'm super impressed by the product already, the speed after you give feedback to actually get the features is truly amazing! Can't wait to see where Openpanel are in 6 months! ”
“ Impressively fast UI and easy to integrate! Added it alongside my current analytics tool for my native app in less than an hour. ”
“ Im using plausible and find it pleasing but limited.
+// Im looking forward to trying out Openpanel, the demo pictures and the page look professional. The listed features seem to be broader then plausible. :) ”
“ Incredibly easy to implement and a joy to use. 5/5 would recommend. ”
diff --git a/apps/public/src/app/widget.tsx b/apps/public/src/app/widget.tsx
deleted file mode 100644
index 795eec57..00000000
--- a/apps/public/src/app/widget.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { ReactNode } from 'react';
-import { cn } from '@/utils/cn';
-import type { LucideIcon } from 'lucide-react';
-
-import { Heading3 } from './copy';
-
-interface WidgetProps {
- title: string;
- children: ReactNode;
- className?: string;
- icons: LucideIcon[];
- offsets: string[];
-}
-
-export function Widget({
- title,
- children,
- className,
- icons,
- offsets,
-}: WidgetProps) {
- return (
-
-
{title}
-
{children}
-
- {icons.map((Icon, i) => (
-
- ))}
-
-
- );
-}
diff --git a/apps/public/src/components/Logo.tsx b/apps/public/src/components/Logo.tsx
index 8a59d3ca..c68ef080 100644
--- a/apps/public/src/components/Logo.tsx
+++ b/apps/public/src/components/Logo.tsx
@@ -19,7 +19,7 @@ export function Logo({ className }: LogoProps) {
width={32}
height={32}
/>
- openpanel.dev
+
openpanel.dev
);
}
diff --git a/apps/public/src/components/TimezoneSelector.tsx b/apps/public/src/components/TimezoneSelector.tsx
deleted file mode 100644
index a670f459..00000000
--- a/apps/public/src/components/TimezoneSelector.tsx
+++ /dev/null
@@ -1,1798 +0,0 @@
-export function TimezoneSelector() {
- return (
-
- );
-}
diff --git a/apps/public/src/components/ui/RenderDots.tsx b/apps/public/src/components/ui/RenderDots.tsx
deleted file mode 100644
index 267c42e7..00000000
--- a/apps/public/src/components/ui/RenderDots.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-'use client';
-
-import { cn } from '@/utils/cn';
-import { Asterisk, ChevronRight } from 'lucide-react';
-
-import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
-
-interface RenderDotsProps extends React.HTMLAttributes
{
- children: string;
- truncate?: boolean;
-}
-
-export function RenderDots({
- children,
- className,
- truncate,
- ...props
-}: RenderDotsProps) {
- const parts = children.split('.');
- const sliceAt = truncate && parts.length > 3 ? 3 : 0;
- return (
-
-
-
- {parts.slice(-sliceAt).map((str, index) => {
- return (
-
- {index !== 0 && (
-
- )}
- {str.includes('[*]') ? (
- <>
- {str.replace('[*]', '')}
-
-
- ) : str === '*' ? (
-
- ) : (
- str
- )}
-
- );
- })}
-
{children}
-
-
- );
-}
diff --git a/apps/public/src/components/ui/alert-dialog.tsx b/apps/public/src/components/ui/alert-dialog.tsx
deleted file mode 100644
index 463dc1e2..00000000
--- a/apps/public/src/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { buttonVariants } from '@/components/ui/button';
-import { cn } from '@/utils/cn';
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
-
-const AlertDialog = AlertDialogPrimitive.Root;
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
-
-const AlertDialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-
-const AlertDialogContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-
-const AlertDialogHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
-
-const AlertDialogFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
-
-const AlertDialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-
-const AlertDialogDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogDescription.displayName =
- AlertDialogPrimitive.Description.displayName;
-
-const AlertDialogAction = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-
-const AlertDialogCancel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
-
-export {
- AlertDialog,
- AlertDialogPortal,
- AlertDialogOverlay,
- AlertDialogTrigger,
- AlertDialogContent,
- AlertDialogHeader,
- AlertDialogFooter,
- AlertDialogTitle,
- AlertDialogDescription,
- AlertDialogAction,
- AlertDialogCancel,
-};
diff --git a/apps/public/src/components/ui/alert.tsx b/apps/public/src/components/ui/alert.tsx
deleted file mode 100644
index 27093d2a..00000000
--- a/apps/public/src/components/ui/alert.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-
-const alertVariants = cva(
- 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
- {
- variants: {
- variant: {
- default: 'bg-background text-foreground',
- destructive:
- 'border-destructive text-destructive dark:border-destructive [&>svg]:text-destructive',
- },
- },
- defaultVariants: {
- variant: 'default',
- },
- }
-);
-
-const Alert = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes & VariantProps
->(({ className, variant, ...props }, ref) => (
-
-));
-Alert.displayName = 'Alert';
-
-const AlertTitle = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertTitle.displayName = 'AlertTitle';
-
-const AlertDescription = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-AlertDescription.displayName = 'AlertDescription';
-
-export { Alert, AlertTitle, AlertDescription };
diff --git a/apps/public/src/components/ui/aspect-ratio.tsx b/apps/public/src/components/ui/aspect-ratio.tsx
deleted file mode 100644
index aaabffbc..00000000
--- a/apps/public/src/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
-
-const AspectRatio = AspectRatioPrimitive.Root;
-
-export { AspectRatio };
diff --git a/apps/public/src/components/ui/avatar.tsx b/apps/public/src/components/ui/avatar.tsx
deleted file mode 100644
index 2817f1c6..00000000
--- a/apps/public/src/components/ui/avatar.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-
-const Avatar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
diff --git a/apps/public/src/components/ui/badge.tsx b/apps/public/src/components/ui/badge.tsx
deleted file mode 100644
index 60b45ea9..00000000
--- a/apps/public/src/components/ui/badge.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-
-const badgeVariants = cva(
- 'inline-flex items-center rounded-full border px-1.5 h-[20px] text-[10px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
- {
- variants: {
- variant: {
- default:
- 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
- secondary:
- 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
- destructive:
- 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
- success:
- 'border-transparent bg-emerald-500 text-emerald-100 hover:bg-emerald-500/80',
- outline: 'text-foreground',
- },
- },
- defaultVariants: {
- variant: 'default',
- },
- }
-);
-
-export interface BadgeProps
- extends React.HTMLAttributes,
- VariantProps {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
- return (
-
- );
-}
-
-export { Badge, badgeVariants };
diff --git a/apps/public/src/components/ui/button.tsx b/apps/public/src/components/ui/button.tsx
index 0ab333b1..70e38d7b 100644
--- a/apps/public/src/components/ui/button.tsx
+++ b/apps/public/src/components/ui/button.tsx
@@ -84,3 +84,16 @@ Button.defaultProps = {
};
export { Button, buttonVariants };
+
+export interface ALinkProps
+ extends React.AnchorHTMLAttributes,
+ VariantProps {}
+
+export const ALink = ({ variant, size, className, ...props }: ALinkProps) => {
+ return (
+
+ );
+};
diff --git a/apps/public/src/components/ui/checkbox.tsx b/apps/public/src/components/ui/checkbox.tsx
deleted file mode 100644
index f5253de3..00000000
--- a/apps/public/src/components/ui/checkbox.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
-
-const Checkbox = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-
-
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
diff --git a/apps/public/src/components/ui/combobox-advanced.tsx b/apps/public/src/components/ui/combobox-advanced.tsx
deleted file mode 100644
index 8a608580..00000000
--- a/apps/public/src/components/ui/combobox-advanced.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Command, CommandGroup, CommandItem } from '@/components/ui/command';
-import { useOnClickOutside } from 'usehooks-ts';
-
-import { Checkbox } from './checkbox';
-import { Input } from './input';
-
-type IValue = any;
-type IItem = Record<'value' | 'label', IValue>;
-
-interface ComboboxAdvancedProps {
- value: IValue[];
- onChange: React.Dispatch>;
- items: IItem[];
- placeholder: string;
-}
-
-export function ComboboxAdvanced({
- items,
- value,
- onChange,
- placeholder,
-}: ComboboxAdvancedProps) {
- const [open, setOpen] = React.useState(false);
- const [inputValue, setInputValue] = React.useState('');
- const ref = React.useRef(null);
- useOnClickOutside(ref, () => setOpen(false));
-
- const selectables = items
- .filter((item) => !value.find((s) => s === item.value))
- .filter(
- (item) =>
- (typeof item.label === 'string' &&
- item.label.toLowerCase().includes(inputValue.toLowerCase())) ||
- (typeof item.value === 'string' &&
- item.value.toLowerCase().includes(inputValue.toLowerCase()))
- );
-
- const renderItem = (item: IItem) => {
- const checked = !!value.find((s) => s === item.value);
- return (
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- onSelect={() => {
- setInputValue('');
- onChange((prev) => {
- if (prev.includes(item.value)) {
- return prev.filter((s) => s !== item.value);
- }
- return [...prev, item.value];
- });
- }}
- className={'cursor-pointer flex items-center gap-2'}
- >
-
- {item?.label ?? item?.value}
-
- );
- };
-
- const renderUnknownItem = (value: IValue) => {
- const item = items.find((item) => item.value === value);
- return item ? renderItem(item) : renderItem({ value, label: value });
- };
-
- return (
-
-
- {open && (
-
-
-
-
- setInputValue(event.target.value)}
- />
-
- {inputValue === ''
- ? value.map(renderUnknownItem)
- : renderItem({
- value: inputValue,
- label: `Pick "${inputValue}"`,
- })}
- {selectables.map(renderItem)}
-
-
-
-
- {selected.map((item) => {
- return (
-
- {item.label}
-
-
- );
- })}
- {/* Avoid having the "Search" Icon */}
- setOpen(false)}
- onFocus={() => setOpen(true)}
- placeholder={placeholder}
- className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1"
- />
-
-
- {open && selectables.length > 0 ? (
-
-
- {selectables.map((item) => {
- return (
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- onSelect={(value) => {
- setInputValue('');
- setSelected((prev) => [...prev, item]);
- }}
- className={'cursor-pointer'}
- >
- {item.label}
-
- );
- })}
-
-
- ) : null}
-
-
- {items.map((item) => (
- {
- const value = find(currentValue)?.value ?? currentValue;
- onChange(value as T);
- setOpen(false);
- }}
- {...(item.disabled && { disabled: true })}
- >
-
- {item.label}
-
- ))}
-
-
-
-
-
- );
-}
diff --git a/apps/public/src/components/ui/command.tsx b/apps/public/src/components/ui/command.tsx
deleted file mode 100644
index 91b9f2af..00000000
--- a/apps/public/src/components/ui/command.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { cn } from '@/utils/cn';
-import type { DialogProps } from '@radix-ui/react-dialog';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from 'lucide-react';
-
-const Command = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-Command.displayName = CommandPrimitive.displayName;
-
-type CommandDialogProps = DialogProps;
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
- return (
-
- );
-};
-
-const CommandInput = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-
-));
-
-CommandInput.displayName = CommandPrimitive.Input.displayName;
-
-const CommandList = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-
-CommandList.displayName = CommandPrimitive.List.displayName;
-
-const CommandEmpty = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->((props, ref) => (
-
-));
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
-const CommandGroup = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
-const CommandSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-
-const CommandItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
-const CommandShortcut = ({
- className,
- ...props
-}: React.HTMLAttributes) => {
- return (
-
- );
-};
-CommandShortcut.displayName = 'CommandShortcut';
-
-export {
- Command,
- CommandDialog,
- CommandInput,
- CommandList,
- CommandEmpty,
- CommandGroup,
- CommandItem,
- CommandShortcut,
- CommandSeparator,
-};
diff --git a/apps/public/src/components/ui/dropdown-menu.tsx b/apps/public/src/components/ui/dropdown-menu.tsx
deleted file mode 100644
index 842e461c..00000000
--- a/apps/public/src/components/ui/dropdown-menu.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-
-));
-DropdownMenuSubTrigger.displayName =
- DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DropdownMenuSubContent.displayName =
- DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, sideOffset = 4, ...props }, ref) => (
-
-
-
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
-
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-));
-DropdownMenuCheckboxItem.displayName =
- DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
-
-
-
-
- {children}
-
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean;
- }
->(({ className, inset, ...props }, ref) => (
-
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({
- className,
- ...props
-}: React.HTMLAttributes) => {
- return (
-
- );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
- DropdownMenu,
- DropdownMenuTrigger,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuCheckboxItem,
- DropdownMenuRadioItem,
- DropdownMenuLabel,
- DropdownMenuSeparator,
- DropdownMenuShortcut,
- DropdownMenuGroup,
- DropdownMenuPortal,
- DropdownMenuSub,
- DropdownMenuSubContent,
- DropdownMenuSubTrigger,
- DropdownMenuRadioGroup,
-};
diff --git a/apps/public/src/components/ui/label.tsx b/apps/public/src/components/ui/label.tsx
deleted file mode 100644
index 19859916..00000000
--- a/apps/public/src/components/ui/label.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-
-const labelVariants = cva(
- 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 block mb-2'
-);
-
-const Label = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef &
- VariantProps
->(({ className, ...props }, ref) => (
-
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
diff --git a/apps/public/src/components/ui/radio-group.tsx b/apps/public/src/components/ui/radio-group.tsx
deleted file mode 100644
index fb251a99..00000000
--- a/apps/public/src/components/ui/radio-group.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-
-export type RadioGroupProps = React.InputHTMLAttributes;
-export type RadioGroupItemProps =
- React.InputHTMLAttributes & {
- active?: boolean;
- };
-
-const RadioGroup = React.forwardRef(
- ({ className, type, ...props }, ref) => {
- return (
-
- );
- }
-);
-
-const RadioGroupItem = React.forwardRef(
- ({ className, active, ...props }, ref) => {
- return (
-
- );
- }
-);
-
-RadioGroup.displayName = 'RadioGroup';
-RadioGroupItem.displayName = 'RadioGroupItem';
-
-export { RadioGroup, RadioGroupItem };
diff --git a/apps/public/src/components/ui/scroll-area.tsx b/apps/public/src/components/ui/scroll-area.tsx
deleted file mode 100644
index b2c7836c..00000000
--- a/apps/public/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-const ScrollArea = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, ...props }, ref) => (
-
-
- {children}
-
-
-
-
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, orientation = 'vertical', ...props }, ref) => (
-
-
-
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };
diff --git a/apps/public/src/components/ui/sheet.tsx b/apps/public/src/components/ui/sheet.tsx
deleted file mode 100644
index d2a3ff6e..00000000
--- a/apps/public/src/components/ui/sheet.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { ScrollArea } from '@radix-ui/react-scroll-area';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-const Sheet = SheetPrimitive.Root;
-
-const SheetTrigger = SheetPrimitive.Trigger;
-
-const SheetClose = SheetPrimitive.Close;
-
-const SheetPortal = SheetPrimitive.Portal;
-
-const SheetOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
- 'fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-150 data-[state=open]:duration-150',
- {
- variants: {
- side: {
- top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
- bottom:
- 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
- left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
- right:
- 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
- },
- },
- defaultVariants: {
- side: 'right',
- },
- }
-);
-
-interface SheetContentProps
- extends React.ComponentPropsWithoutRef,
- VariantProps {}
-
-const SheetContent = React.forwardRef<
- React.ElementRef,
- SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-
-
-
-
- {children}
-
-
-
- Close
-
-
-
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-
-const SheetHeader = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-SheetHeader.displayName = 'SheetHeader';
-
-const SheetFooter = ({
- className,
- ...props
-}: React.HTMLAttributes) => (
-
-);
-SheetFooter.displayName = 'SheetFooter';
-
-const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-
-const SheetDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-export {
- Sheet,
- SheetPortal,
- SheetOverlay,
- SheetTrigger,
- SheetClose,
- SheetContent,
- SheetHeader,
- SheetFooter,
- SheetTitle,
- SheetDescription,
-};
diff --git a/apps/public/src/components/ui/table.tsx b/apps/public/src/components/ui/table.tsx
deleted file mode 100644
index fda58dff..00000000
--- a/apps/public/src/components/ui/table.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-
-const Table = React.forwardRef<
- HTMLTableElement,
- React.HTMLAttributes & {
- wrapper?: boolean;
- overflow?: boolean;
- }
->(({ className, wrapper, overflow = true, ...props }, ref) => (
-
-));
-Table.displayName = 'Table';
-
-const TableHeader = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-TableHeader.displayName = 'TableHeader';
-
-const TableBody = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-TableBody.displayName = 'TableBody';
-
-const TableFooter = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-TableFooter.displayName = 'TableFooter';
-
-const TableRow = React.forwardRef<
- HTMLTableRowElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
- |
-));
-TableRow.displayName = 'TableRow';
-
-const TableHead = React.forwardRef<
- HTMLTableCellElement,
- React.ThHTMLAttributes
->(({ className, ...props }, ref) => (
- |
-));
-TableHead.displayName = 'TableHead';
-
-const TableCell = React.forwardRef<
- HTMLTableCellElement,
- React.TdHTMLAttributes
->(({ className, ...props }, ref) => (
- |
-));
-TableCell.displayName = 'TableCell';
-
-const TableCaption = React.forwardRef<
- HTMLTableCaptionElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-));
-TableCaption.displayName = 'TableCaption';
-
-export {
- Table,
- TableHeader,
- TableBody,
- TableFooter,
- TableHead,
- TableRow,
- TableCell,
- TableCaption,
-};
diff --git a/apps/public/src/components/ui/toast.tsx b/apps/public/src/components/ui/toast.tsx
deleted file mode 100644
index aa5ebf9f..00000000
--- a/apps/public/src/components/ui/toast.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/utils/cn';
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
- 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
- {
- variants: {
- variant: {
- default: 'border bg-background text-foreground',
- destructive:
- 'destructive group border-destructive bg-destructive text-destructive-foreground',
- },
- },
- defaultVariants: {
- variant: 'default',
- },
- }
-);
-
-const Toast = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef &
- VariantProps
->(({ className, variant, ...props }, ref) => {
- return (
-
- );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-
-
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef;
-
-type ToastActionElement = React.ReactElement;
-
-export {
- type ToastProps,
- type ToastActionElement,
- ToastProvider,
- ToastViewport,
- Toast,
- ToastTitle,
- ToastDescription,
- ToastClose,
- ToastAction,
-};
diff --git a/apps/public/src/components/ui/toaster.tsx b/apps/public/src/components/ui/toaster.tsx
deleted file mode 100644
index beb7f25c..00000000
--- a/apps/public/src/components/ui/toaster.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client';
-
-import {
- Toast,
- ToastClose,
- ToastDescription,
- ToastProvider,
- ToastTitle,
- ToastViewport,
-} from '@/components/ui/toast';
-import { useToast } from '@/components/ui/use-toast';
-
-export function Toaster() {
- const { toasts } = useToast();
-
- return (
-
- {toasts.map(function ({ id, title, description, action, ...props }) {
- return (
-
-
- {title && {title}}
- {description && (
- {description}
- )}
-
- {action}
-
-
- );
- })}
-
-
- );
-}
diff --git a/apps/public/tailwind.config.js b/apps/public/tailwind.config.js
index effffa45..91caa7f6 100644
--- a/apps/public/tailwind.config.js
+++ b/apps/public/tailwind.config.js
@@ -7,6 +7,10 @@ const config = {
'./src/**/*.{ts,tsx}',
],
theme: {
+ fontFamily: {
+ sans: ['var(--font-sans)'],
+ serif: ['var(--font-serif)'],
+ },
container: {
center: true,
padding: '1rem',
-