improve web ui
This commit is contained in:
+144
-103
@@ -1,115 +1,156 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { Activity, Server, Users, KeyRound, LibraryBig, Settings } from 'lucide-react'
|
||||
import { BrandMark } from '@/components/brand-mark'
|
||||
import { Wordmark } from '@/components/wordmark'
|
||||
import { m } from '@/paraglide/messages'
|
||||
import { useLocale, changeLocale, locales, type Locale } from '@/lib/i18n'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import {
|
||||
Activity,
|
||||
KeyRound,
|
||||
LibraryBig,
|
||||
Server,
|
||||
Settings,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { motion, stagger } from "motion/react";
|
||||
import type { ReactNode } from "react";
|
||||
import { BrandMark } from "@/components/brand-mark";
|
||||
import { Wordmark } from "@/components/wordmark";
|
||||
import { changeLocale, type Locale, locales, useLocale } from "@/lib/i18n";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { m } from "@/paraglide/messages";
|
||||
|
||||
const MLink = motion(Link);
|
||||
|
||||
const NAV = [
|
||||
{ to: '/', icon: Activity, label: () => m.nav_dashboard() },
|
||||
{ to: '/host', icon: Server, label: () => m.nav_host() },
|
||||
{ to: '/library', icon: LibraryBig, label: () => m.nav_library() },
|
||||
{ to: '/clients', icon: Users, label: () => m.nav_clients() },
|
||||
{ to: '/pairing', icon: KeyRound, label: () => m.nav_pairing() },
|
||||
{ to: '/settings', icon: Settings, label: () => m.nav_settings() },
|
||||
] as const
|
||||
{ to: "/", icon: Activity, label: () => m.nav_dashboard() },
|
||||
{ to: "/host", icon: Server, label: () => m.nav_host() },
|
||||
{ to: "/library", icon: LibraryBig, label: () => m.nav_library() },
|
||||
{ to: "/clients", icon: Users, label: () => m.nav_clients() },
|
||||
{ to: "/pairing", icon: KeyRound, label: () => m.nav_pairing() },
|
||||
{ to: "/settings", icon: Settings, label: () => m.nav_settings() },
|
||||
] as const;
|
||||
|
||||
// Staggered entrance for the sidebar nav: each item fans in from the left a beat
|
||||
// after the previous. Per-item delays (rather than a parent stagger) keep every
|
||||
// item independent, so none can be left mid-orchestration / invisible.
|
||||
const NAV_ENTER_DELAY = 0.08;
|
||||
const NAV_ENTER_STEP = 0.06;
|
||||
|
||||
export function AppShell({ children }: { children: ReactNode }) {
|
||||
// Read the locale so the whole shell re-renders on a language switch.
|
||||
useLocale()
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
{/* Desktop sidebar (≥ sm). */}
|
||||
<aside className="hidden w-60 shrink-0 flex-col border-r bg-card/40 p-4 sm:flex">
|
||||
<Link
|
||||
to="/"
|
||||
aria-label="punktfunk"
|
||||
className="mb-7 flex items-center gap-2 px-2 pt-1"
|
||||
>
|
||||
<BrandMark className="size-7 drop-shadow-[0_2px_12px_rgba(108,91,243,0.45)]" />
|
||||
<Wordmark className="h-4" />
|
||||
</Link>
|
||||
<nav className="flex flex-col gap-1">
|
||||
{NAV.map(({ to, icon: Icon, label }) => (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
activeOptions={{ exact: to === '/' }}
|
||||
className="flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||
activeProps={{ className: 'bg-primary/15 text-foreground font-medium' }}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
{label()}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
<div className="mt-auto pt-4">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</aside>
|
||||
// Read the locale so the whole shell re-renders on a language switch.
|
||||
useLocale();
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
{/* Desktop sidebar (≥ sm). */}
|
||||
<aside className="hidden w-60 shrink-0 flex-col border-r bg-card/40 p-4 sm:flex">
|
||||
<Link
|
||||
to="/"
|
||||
aria-label="punktfunk"
|
||||
className="mb-7 flex items-center gap-2 px-2 pt-1"
|
||||
>
|
||||
<BrandMark className="size-7 drop-shadow-[0_2px_12px_rgba(108,91,243,0.45)]" />
|
||||
<Wordmark className="h-4" />
|
||||
</Link>
|
||||
<motion.nav
|
||||
animate="enter"
|
||||
initial="from"
|
||||
transition={{
|
||||
delayChildren: stagger(0.1),
|
||||
}}
|
||||
variants={{ enter: {}, from: {} }}
|
||||
className="flex flex-col gap-1"
|
||||
>
|
||||
{NAV.map(({ to, icon: Icon, label }, i) => (
|
||||
<MLink
|
||||
key={to}
|
||||
variants={{
|
||||
from: { opacity: 0, x: -20 },
|
||||
enter: { opacity: 1, x: 0 },
|
||||
}}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
to={to}
|
||||
activeOptions={{ exact: to === "/" }}
|
||||
className="group relative flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:text-foreground"
|
||||
activeProps={{
|
||||
className: "bg-primary/15 text-foreground font-medium",
|
||||
}}
|
||||
>
|
||||
{/* Hover brightens: a brand-tinted wash layered OVER whatever the
|
||||
link's background is (transparent or the active tint), so the
|
||||
item gets lighter on hover — including the active one. */}
|
||||
<span
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-0 rounded-md bg-primary/0 transition-colors duration-200 group-hover:bg-primary/15"
|
||||
/>
|
||||
<Icon className="relative size-4" />
|
||||
<span className="relative">{label()}</span>
|
||||
</MLink>
|
||||
))}
|
||||
</motion.nav>
|
||||
<div className="mt-auto pt-4">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="flex flex-1 flex-col overflow-x-hidden">
|
||||
{/* Mobile top bar (< sm): brand + language. The sidebar is hidden here. */}
|
||||
<header className="flex items-center gap-2 border-b bg-card/40 px-4 py-3 sm:hidden">
|
||||
<BrandMark className="size-6" />
|
||||
<Wordmark className="h-3.5" />
|
||||
<div className="ml-auto">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</header>
|
||||
<div className="flex flex-1 flex-col overflow-x-hidden">
|
||||
{/* Mobile top bar (< sm): brand + language. The sidebar is hidden here. */}
|
||||
<header className="flex items-center gap-2 border-b bg-card/40 px-4 py-3 sm:hidden">
|
||||
<BrandMark className="size-6" />
|
||||
<Wordmark className="h-3.5" />
|
||||
<div className="ml-auto">
|
||||
<LanguageSwitcher />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1">
|
||||
{/* pb-24 leaves room for the fixed bottom nav on mobile. */}
|
||||
<div className="mx-auto max-w-5xl p-6 pb-24 sm:p-10 sm:pb-10">{children}</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="flex-1">
|
||||
{/* pb-24 leaves room for the fixed bottom nav on mobile. */}
|
||||
<div className="mx-auto max-w-5xl p-6 pb-24 sm:p-10 sm:pb-10">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* Mobile bottom tab bar (< sm): the primary navigation on phones. */}
|
||||
<nav
|
||||
className="fixed inset-x-0 bottom-0 z-40 flex border-t bg-card/95 backdrop-blur sm:hidden"
|
||||
style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
|
||||
>
|
||||
{NAV.map(({ to, icon: Icon, label }) => (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
activeOptions={{ exact: to === '/' }}
|
||||
className="flex flex-1 flex-col items-center justify-center gap-1 px-0.5 py-2 text-muted-foreground transition-colors"
|
||||
activeProps={{ className: 'text-[var(--brand-light)]' }}
|
||||
>
|
||||
<Icon className="size-5 shrink-0" />
|
||||
{/* Fixed two-line-tall box so a 1- or 2-line label keeps every icon
|
||||
{/* Mobile bottom tab bar (< sm): the primary navigation on phones. */}
|
||||
<nav
|
||||
className="fixed inset-x-0 bottom-0 z-40 flex border-t bg-card/95 backdrop-blur sm:hidden"
|
||||
style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
|
||||
>
|
||||
{NAV.map(({ to, icon: Icon, label }) => (
|
||||
<Link
|
||||
key={to}
|
||||
to={to}
|
||||
activeOptions={{ exact: to === "/" }}
|
||||
className="flex flex-1 flex-col items-center justify-center gap-1 px-0.5 py-2 text-muted-foreground transition-colors"
|
||||
activeProps={{ className: "text-[var(--brand-light)]" }}
|
||||
>
|
||||
<Icon className="size-5 shrink-0" />
|
||||
{/* Fixed two-line-tall box so a 1- or 2-line label keeps every icon
|
||||
at the same height (the labels vary by locale). */}
|
||||
<span className="flex h-7 w-full items-center justify-center text-center text-[10px] leading-tight">
|
||||
{label()}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
<span className="flex h-7 w-full items-center justify-center text-center text-[10px] leading-tight">
|
||||
{label()}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LanguageSwitcher() {
|
||||
const current = useLocale()
|
||||
return (
|
||||
<div className="flex gap-1" role="group" aria-label="Language">
|
||||
{locales.map((l: Locale) => (
|
||||
<button
|
||||
key={l}
|
||||
onClick={() => changeLocale(l)}
|
||||
className={cn(
|
||||
'rounded px-2 py-1 text-xs uppercase transition-colors',
|
||||
l === current
|
||||
? 'bg-primary/20 text-foreground font-medium'
|
||||
: 'text-muted-foreground hover:text-foreground',
|
||||
)}
|
||||
>
|
||||
{l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
const current = useLocale();
|
||||
return (
|
||||
<div className="flex gap-1" role="group" aria-label="Language">
|
||||
{locales.map((l: Locale) => (
|
||||
<button
|
||||
key={l}
|
||||
onClick={() => changeLocale(l)}
|
||||
className={cn(
|
||||
"rounded px-2 py-1 text-xs uppercase transition-colors",
|
||||
l === current
|
||||
? "bg-primary/20 text-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{l}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,29 +3,29 @@
|
||||
// verbatim with the marketing site + docs). Back-to-front: large light-violet
|
||||
// circle, deep-violet circle, light highlight where they overlap.
|
||||
export function BrandMark({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
aria-label="punktfunk"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1000 1000"
|
||||
className={className}
|
||||
>
|
||||
<title>punktfunk</title>
|
||||
<path
|
||||
d="M403.037,791.672c107.586,0 194.41,-86.824 194.41,-194.41c0,-107.586 -86.824,-194.41 -194.41,-194.41c-107.586,0 -194.41,86.824 -194.41,194.41c0,107.586 86.824,194.41 194.41,194.41Z"
|
||||
fill="#a79ff8"
|
||||
/>
|
||||
<path
|
||||
d="M735.276,540.321c76.075,-76.075 76.075,-198.862 0,-274.937c-76.075,-76.075 -198.862,-76.075 -274.937,0c-76.075,76.075 -76.075,198.862 0,274.937c76.075,76.075 198.862,76.075 274.937,0Z"
|
||||
fill="#6c5bf3"
|
||||
/>
|
||||
<path
|
||||
d="M647.84,590.737c-64.853,17.403 -136.871,0.597 -187.885,-50.416c-51.013,-51.013 -67.819,-123.032 -50.416,-187.885c64.853,-17.403 136.871,-0.597 187.885,50.416c51.013,51.013 67.819,123.032 50.416,187.885Z"
|
||||
fill="#d2c9fb"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
return (
|
||||
<svg
|
||||
aria-label="punktfunk"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1000 1000"
|
||||
className={className}
|
||||
>
|
||||
<title>punktfunk</title>
|
||||
<path
|
||||
d="M403.037,791.672c107.586,0 194.41,-86.824 194.41,-194.41c0,-107.586 -86.824,-194.41 -194.41,-194.41c-107.586,0 -194.41,86.824 -194.41,194.41c0,107.586 86.824,194.41 194.41,194.41Z"
|
||||
fill="#a79ff8"
|
||||
/>
|
||||
<path
|
||||
d="M735.276,540.321c76.075,-76.075 76.075,-198.862 0,-274.937c-76.075,-76.075 -198.862,-76.075 -274.937,0c-76.075,76.075 -76.075,198.862 0,274.937c76.075,76.075 198.862,76.075 274.937,0Z"
|
||||
fill="#6c5bf3"
|
||||
/>
|
||||
<path
|
||||
d="M647.84,590.737c-64.853,17.403 -136.871,0.597 -187.885,-50.416c-51.013,-51.013 -67.819,-123.032 -50.416,-187.885c64.853,-17.403 136.871,-0.597 187.885,50.416c51.013,51.013 67.819,123.032 50.416,187.885Z"
|
||||
fill="#d2c9fb"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default BrandMark
|
||||
export default BrandMark;
|
||||
|
||||
+10
-10
@@ -1,17 +1,17 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { BrandMark } from './brand-mark'
|
||||
import { Wordmark } from './wordmark'
|
||||
import { cn } from "@/lib/utils";
|
||||
import { BrandMark } from "./brand-mark";
|
||||
import { Wordmark } from "./wordmark";
|
||||
|
||||
// Full punktfunk lockup: the lens mark anchored to the top-left corner of the
|
||||
// "funk" wordmark. Size the lockup with a width on the wrapper (e.g. `w-40`);
|
||||
// the mark scales as a fraction of that width.
|
||||
export function Logo({ className }: { className?: string }) {
|
||||
return (
|
||||
<div className={cn('relative inline-block', className)}>
|
||||
<BrandMark className="absolute left-0 top-0 w-[24%] -translate-x-[55%] -translate-y-[58%] drop-shadow-[0_4px_24px_rgba(108,91,243,0.45)]" />
|
||||
<Wordmark className="block h-auto w-full" />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className={cn("relative inline-block", className)}>
|
||||
<BrandMark className="absolute left-0 top-0 w-[24%] -translate-x-[55%] -translate-y-[58%] drop-shadow-[0_4px_24px_rgba(108,91,243,0.45)]" />
|
||||
<Wordmark className="block h-auto w-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Logo
|
||||
export default Logo;
|
||||
|
||||
@@ -1,43 +1,53 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { ApiError } from '@/api/fetcher'
|
||||
import { Spinner } from '@/components/ui/spinner'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { m } from '@/paraglide/messages'
|
||||
import type { ReactNode } from "react";
|
||||
import { ApiError } from "@/api/fetcher";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Spinner } from "@/components/ui/spinner";
|
||||
import { m } from "@/paraglide/messages";
|
||||
|
||||
interface QueryStateProps {
|
||||
isLoading: boolean
|
||||
error: unknown
|
||||
refetch?: () => void
|
||||
children: ReactNode
|
||||
isLoading: boolean;
|
||||
error: unknown;
|
||||
refetch?: () => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/** Uniform loading/error wrapper for a query-backed view. */
|
||||
export function QueryState({ isLoading, error, refetch, children }: QueryStateProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className="flex min-h-40 flex-col items-center justify-center gap-3 text-sm text-muted-foreground"
|
||||
>
|
||||
<Spinner className="size-8" />
|
||||
{m.common_loading()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if (error) {
|
||||
const unauthorized = error instanceof ApiError && error.status === 401
|
||||
return (
|
||||
<div className="rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm">
|
||||
<p className="font-medium text-destructive">
|
||||
{unauthorized ? m.common_unauthorized() : m.common_error()}
|
||||
</p>
|
||||
{refetch && !unauthorized && (
|
||||
<Button variant="outline" size="sm" className="mt-3" onClick={() => refetch()}>
|
||||
{m.common_retry()}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return <>{children}</>
|
||||
export function QueryState({
|
||||
isLoading,
|
||||
error,
|
||||
refetch,
|
||||
children,
|
||||
}: QueryStateProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div
|
||||
role="status"
|
||||
className="flex min-h-40 flex-col items-center justify-center gap-3 text-sm text-muted-foreground"
|
||||
>
|
||||
<Spinner className="size-8" />
|
||||
{m.common_loading()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (error) {
|
||||
const unauthorized = error instanceof ApiError && error.status === 401;
|
||||
return (
|
||||
<div className="rounded-lg border border-destructive/40 bg-destructive/5 p-4 text-sm">
|
||||
<p className="font-medium text-destructive">
|
||||
{unauthorized ? m.common_unauthorized() : m.common_error()}
|
||||
</p>
|
||||
{refetch && !unauthorized && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3"
|
||||
onClick={() => refetch()}
|
||||
>
|
||||
{m.common_retry()}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { Children, type ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Page content wrapper that animates in on mount — so the content fans up into
|
||||
* place every time you navigate or load a route (the route remounts, this
|
||||
* remounts). Each direct child is staggered a beat after the previous (the same
|
||||
* on-mount-delay pattern the sidebar nav uses). Honours prefers-reduced-motion.
|
||||
*/
|
||||
export function Section({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
const reduce = useReducedMotion();
|
||||
return (
|
||||
<div className={cn("flex flex-col gap-6", className)}>
|
||||
{Children.map(children, (child, i) =>
|
||||
reduce ? (
|
||||
child
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.03 + i * 0.07,
|
||||
duration: 0.42,
|
||||
ease: [0.16, 1, 0.3, 1],
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
</motion.div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,29 +1,32 @@
|
||||
import * as React from 'react'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import type * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border-transparent bg-primary text-primary-foreground',
|
||||
secondary: 'border-transparent bg-secondary text-secondary-foreground',
|
||||
destructive: 'border-transparent bg-destructive text-destructive-foreground',
|
||||
success: 'border-transparent bg-[var(--success)] text-white',
|
||||
outline: 'text-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: 'default' },
|
||||
},
|
||||
)
|
||||
"inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary text-primary-foreground",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground",
|
||||
destructive:
|
||||
"border-transparent bg-destructive text-destructive-foreground",
|
||||
success: "border-transparent bg-[var(--success)] text-white",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: { variant: "default" },
|
||||
},
|
||||
);
|
||||
|
||||
export interface BadgeProps
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
extends React.HTMLAttributes<HTMLDivElement>,
|
||||
VariantProps<typeof badgeVariants> {}
|
||||
|
||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
return (
|
||||
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
export { Badge, badgeVariants };
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import type { ComponentProps } from 'react'
|
||||
import { AnimatedButton, buttonVariants } from '@unom/ui/button'
|
||||
import { AnimatedButton, buttonVariants } from "@unom/ui/button";
|
||||
import type { ComponentProps } from "react";
|
||||
|
||||
// The console's Button IS @unom/ui's animated button — pill shape, specular
|
||||
// material gloss + UI click/hover sounds (enabled via UnomProviders), driven by
|
||||
// the shared brand tokens. Same variant/size vocabulary the routes already use
|
||||
// (default/destructive/outline/secondary/ghost/link + default/sm/lg/icon).
|
||||
export type ButtonProps = ComponentProps<typeof AnimatedButton>
|
||||
export type ButtonProps = ComponentProps<typeof AnimatedButton>;
|
||||
|
||||
export const Button = AnimatedButton
|
||||
export const Button = AnimatedButton;
|
||||
|
||||
export { buttonVariants }
|
||||
export { buttonVariants };
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from 'react'
|
||||
import type { ComponentProps } from 'react'
|
||||
import { AnimatedCard } from '@unom/ui/card'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { AnimatedCard } from "@unom/ui/card";
|
||||
import type { ComponentProps } from "react";
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// The console's Card IS @unom/ui's animated card — a `bg-neutral` (#1c1530)
|
||||
// surface with a soft brand-violet ring, on-mount motion + material gloss
|
||||
@@ -9,56 +9,85 @@ import { cn } from '@/lib/utils'
|
||||
// API (CardHeader/Title/Description/Content/Footer own their own padding), so
|
||||
// the card defaults to `padding={false}` to avoid doubling it, and soften the
|
||||
// 2px ring to a subtle 1px brand tint.
|
||||
type CardProps = ComponentProps<typeof AnimatedCard>
|
||||
type CardProps = ComponentProps<typeof AnimatedCard>;
|
||||
|
||||
const Card = ({ className, padding = false, children, ...props }: CardProps) => (
|
||||
<AnimatedCard
|
||||
padding={padding}
|
||||
className={cn('ring-1 ring-accent/40', className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</AnimatedCard>
|
||||
)
|
||||
Card.displayName = 'Card'
|
||||
const Card = ({
|
||||
className,
|
||||
padding = false,
|
||||
children,
|
||||
...props
|
||||
}: CardProps) => (
|
||||
<AnimatedCard
|
||||
padding={padding}
|
||||
className={cn("ring-1 ring-accent/40", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</AnimatedCard>
|
||||
);
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardHeader.displayName = 'CardHeader'
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn('font-semibold leading-none tracking-tight', className)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
CardTitle.displayName = 'CardTitle'
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardDescription.displayName = 'CardDescription'
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardContent.displayName = 'CardContent'
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
));
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
|
||||
),
|
||||
)
|
||||
CardFooter.displayName = 'CardFooter'
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
export {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
};
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
// The console's Input IS @unom/ui's form input (shadcn-compatible tokens:
|
||||
// border-input / muted-foreground / ring, material gloss via UnomProviders).
|
||||
export { InputText as Input } from '@unom/ui/form/input-text'
|
||||
export { InputText as Input } from "@unom/ui/form/input-text";
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// The console's Label IS @unom/ui's form label (radix-backed, text-main).
|
||||
export { Label } from '@unom/ui/form/label'
|
||||
export { Label } from "@unom/ui/form/label";
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { motion, useReducedMotion, useTime, useTransform } from 'motion/react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { motion, useReducedMotion, useTime, useTransform } from "motion/react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// The punktfunk lens, alive. The two overlapping circles of the brand mark are
|
||||
// recreated from divs and animated as if orbiting on a path whose long axis points
|
||||
@@ -13,76 +13,85 @@ import { cn } from '@/lib/utils'
|
||||
// both the scaling and the front/back swap. Honours prefers-reduced-motion.
|
||||
// Size via className (e.g. `size-8`); geometry derives from the box.
|
||||
|
||||
const DURATION_MS = 1600
|
||||
const R_DEPTH = 0.34 // depth amplitude (fraction of box) → the size change
|
||||
const PERSP = 1.05 // perspective distance (fraction of box); smaller → stronger scaling
|
||||
const R_PLANE_FIXED = 0.12 // constant in-plane offset → the two never fully eclipse
|
||||
const R_PLANE_SWAY = 0.05 // small in-plane breathing
|
||||
const DIAG: readonly [number, number] = [-Math.SQRT1_2, Math.SQRT1_2] // lens axis (↙ light / ↗ deep)
|
||||
const LOBE_FRAC = 0.58 // circle diameter as a fraction of the box
|
||||
const REST = 0 // reduced-motion: park flat (widest lens, no depth) = the brand mark
|
||||
const DURATION_MS = 1600;
|
||||
const R_DEPTH = 0.34; // depth amplitude (fraction of box) → the size change
|
||||
const PERSP = 1.05; // perspective distance (fraction of box); smaller → stronger scaling
|
||||
const R_PLANE_FIXED = 0.12; // constant in-plane offset → the two never fully eclipse
|
||||
const R_PLANE_SWAY = 0.05; // small in-plane breathing
|
||||
const DIAG: readonly [number, number] = [-Math.SQRT1_2, Math.SQRT1_2]; // lens axis (↙ light / ↗ deep)
|
||||
const LOBE_FRAC = 0.58; // circle diameter as a fraction of the box
|
||||
const REST = 0; // reduced-motion: park flat (widest lens, no depth) = the brand mark
|
||||
|
||||
export function Spinner({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
|
||||
const reduce = useReducedMotion()
|
||||
const ref = useRef<HTMLDivElement>(null)
|
||||
const sizeRef = useRef(0)
|
||||
const time = useTime()
|
||||
export function Spinner({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
const reduce = useReducedMotion();
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const sizeRef = useRef(0);
|
||||
const time = useTime();
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current
|
||||
if (!el) return
|
||||
sizeRef.current = el.clientWidth
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
const w = entries[0]?.contentRect.width
|
||||
if (w) sizeRef.current = w
|
||||
})
|
||||
ro.observe(el)
|
||||
return () => ro.disconnect()
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
sizeRef.current = el.clientWidth;
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
const w = entries[0]?.contentRect.width;
|
||||
if (w) sizeRef.current = w;
|
||||
});
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
const angleAt = (t: number) => (reduce ? REST : (t / DURATION_MS) * Math.PI * 2)
|
||||
const depthAt = (t: number, side: number) => side * Math.sin(angleAt(t)) * R_DEPTH
|
||||
const angleAt = (t: number) =>
|
||||
reduce ? REST : (t / DURATION_MS) * Math.PI * 2;
|
||||
const depthAt = (t: number, side: number) =>
|
||||
side * Math.sin(angleAt(t)) * R_DEPTH;
|
||||
|
||||
const transformAt = (t: number, side: number) => {
|
||||
const s = sizeRef.current
|
||||
const angle = angleAt(t)
|
||||
const z = side * Math.sin(angle) * R_DEPTH // world depth (toward viewer = +)
|
||||
const p = PERSP / (PERSP - z) // perspective: nearer → bigger, farther → smaller
|
||||
const mag = (R_PLANE_FIXED + R_PLANE_SWAY * Math.cos(angle)) * side
|
||||
const x = mag * DIAG[0] * p * s
|
||||
const y = mag * DIAG[1] * p * s
|
||||
return `translate(-50%, -50%) translate(${x}px, ${y}px) scale(${p})`
|
||||
}
|
||||
const transformAt = (t: number, side: number) => {
|
||||
const s = sizeRef.current;
|
||||
const angle = angleAt(t);
|
||||
const z = side * Math.sin(angle) * R_DEPTH; // world depth (toward viewer = +)
|
||||
const p = PERSP / (PERSP - z); // perspective: nearer → bigger, farther → smaller
|
||||
const mag = (R_PLANE_FIXED + R_PLANE_SWAY * Math.cos(angle)) * side;
|
||||
const x = mag * DIAG[0] * p * s;
|
||||
const y = mag * DIAG[1] * p * s;
|
||||
return `translate(-50%, -50%) translate(${x}px, ${y}px) scale(${p})`;
|
||||
};
|
||||
|
||||
const tLight = useTransform(time, (t) => transformAt(t, 1))
|
||||
const tDeep = useTransform(time, (t) => transformAt(t, -1))
|
||||
// z-index follows depth, so whichever circle is nearer is painted on top.
|
||||
const zLight = useTransform(time, (t) => Math.round(depthAt(t, 1) * 1000))
|
||||
const zDeep = useTransform(time, (t) => Math.round(depthAt(t, -1) * 1000))
|
||||
const tLight = useTransform(time, (t) => transformAt(t, 1));
|
||||
const tDeep = useTransform(time, (t) => transformAt(t, -1));
|
||||
// z-index follows depth, so whichever circle is nearer is painted on top.
|
||||
const zLight = useTransform(time, (t) => Math.round(depthAt(t, 1) * 1000));
|
||||
const zDeep = useTransform(time, (t) => Math.round(depthAt(t, -1) * 1000));
|
||||
|
||||
const lobe = (color: string): React.CSSProperties => ({
|
||||
width: `${LOBE_FRAC * 100}%`,
|
||||
height: `${LOBE_FRAC * 100}%`,
|
||||
backgroundColor: color,
|
||||
mixBlendMode: 'screen',
|
||||
})
|
||||
const lobe = (color: string): React.CSSProperties => ({
|
||||
width: `${LOBE_FRAC * 100}%`,
|
||||
height: `${LOBE_FRAC * 100}%`,
|
||||
backgroundColor: color,
|
||||
mixBlendMode: "screen",
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
className={cn('relative inline-block size-6 isolate', className)}
|
||||
{...props}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 rounded-full"
|
||||
style={{ ...lobe('var(--pf-brand-light)'), transform: tLight, zIndex: zLight }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 rounded-full"
|
||||
style={{ ...lobe('var(--pf-brand)'), transform: tDeep, zIndex: zDeep }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
className={cn("relative inline-block size-6 isolate", className)}
|
||||
{...props}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 rounded-full"
|
||||
style={{
|
||||
...lobe("var(--pf-brand-light)"),
|
||||
transform: tLight,
|
||||
zIndex: zLight,
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 rounded-full"
|
||||
style={{ ...lobe("var(--pf-brand)"), transform: tDeep, zIndex: zDeep }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,70 +1,80 @@
|
||||
import * as React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
|
||||
</div>
|
||||
),
|
||||
)
|
||||
Table.displayName = 'Table'
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
));
|
||||
Table.displayName = "Table";
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
|
||||
))
|
||||
TableHeader.displayName = 'TableHeader'
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
));
|
||||
TableHeader.displayName = "TableHeader";
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
||||
))
|
||||
TableBody.displayName = 'TableBody'
|
||||
<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableBody.displayName = "TableBody";
|
||||
|
||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
||||
({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
)
|
||||
TableRow.displayName = 'TableRow'
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableRow.displayName = "TableRow";
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableHead.displayName = 'TableHead'
|
||||
<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableHead.displayName = "TableHead";
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
TableCell.displayName = 'TableCell'
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCell.displayName = "TableCell";
|
||||
|
||||
export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell }
|
||||
export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow };
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// The punktfunk "funk" wordmark — the real brand typo, vectorised from the
|
||||
// marketing logo. currentColor so it recolours per surface; defaults to the
|
||||
// light-violet lens highlight that reads on the dark console chrome. Size via
|
||||
// height (e.g. `h-5`); width follows the viewBox.
|
||||
export function Wordmark({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
role="img"
|
||||
aria-label="punktfunk"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 579 136"
|
||||
fill="currentColor"
|
||||
className={cn('w-auto text-highlight', className)}
|
||||
>
|
||||
<title>punktfunk</title>
|
||||
<path d="M16.782,16.051l0,102.687l31.253,0l0,-35.563l73.436,0l0,-23.555l-73.436,0l0,-19.398l77.285,0l0,-24.171l-108.537,0Z" />
|
||||
<path d="M131.785,16.051l0,47.264c0.154,16.627 0.154,16.627 0.308,20.014c0.77,15.087 2.463,21.4 7.544,26.634c7.698,8.16 20.014,10.315 59.272,10.315c23.863,0 34.178,-0.616 43.415,-2.463c11.7,-2.463 19.552,-10.623 21.246,-22.323c0.924,-7.236 1.078,-8.929 1.54,-32.176l0,-47.264l-31.253,0l0,47.264c0,2.155 -0.154,7.082 -0.308,10.623c-0.462,9.699 -1.232,12.47 -3.695,15.087c-3.387,3.695 -9.853,4.619 -31.407,4.619c-26.634,0 -32.638,-1.693 -34.332,-9.853c-0.77,-4.157 -0.77,-4.311 -1.078,-20.476l0,-47.264l-31.253,0Z" />
|
||||
<path d="M271.575,15.943l0,102.687l31.868,0l-0.77,-76.669l3.387,0l54.038,76.669l54.346,0l0,-102.687l-31.868,0l0.77,76.515l-3.233,0l-53.73,-76.515l-54.808,0Z" />
|
||||
<path d="M420.91,15.943l0,102.687l31.253,0l0,-39.258l17.089,0l46.032,39.258l47.418,0l-64.353,-52.344l59.426,-50.959l-47.88,0l-40.644,37.873l-17.089,0l0,-37.257l-31.253,0Z" />
|
||||
</svg>
|
||||
)
|
||||
return (
|
||||
<svg
|
||||
role="img"
|
||||
aria-label="punktfunk"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 579 136"
|
||||
fill="currentColor"
|
||||
className={cn("w-auto text-highlight", className)}
|
||||
>
|
||||
<title>punktfunk</title>
|
||||
<path d="M16.782,16.051l0,102.687l31.253,0l0,-35.563l73.436,0l0,-23.555l-73.436,0l0,-19.398l77.285,0l0,-24.171l-108.537,0Z" />
|
||||
<path d="M131.785,16.051l0,47.264c0.154,16.627 0.154,16.627 0.308,20.014c0.77,15.087 2.463,21.4 7.544,26.634c7.698,8.16 20.014,10.315 59.272,10.315c23.863,0 34.178,-0.616 43.415,-2.463c11.7,-2.463 19.552,-10.623 21.246,-22.323c0.924,-7.236 1.078,-8.929 1.54,-32.176l0,-47.264l-31.253,0l0,47.264c0,2.155 -0.154,7.082 -0.308,10.623c-0.462,9.699 -1.232,12.47 -3.695,15.087c-3.387,3.695 -9.853,4.619 -31.407,4.619c-26.634,0 -32.638,-1.693 -34.332,-9.853c-0.77,-4.157 -0.77,-4.311 -1.078,-20.476l0,-47.264l-31.253,0Z" />
|
||||
<path d="M271.575,15.943l0,102.687l31.868,0l-0.77,-76.669l3.387,0l54.038,76.669l54.346,0l0,-102.687l-31.868,0l0.77,76.515l-3.233,0l-53.73,-76.515l-54.808,0Z" />
|
||||
<path d="M420.91,15.943l0,102.687l31.253,0l0,-39.258l17.089,0l46.032,39.258l47.418,0l-64.353,-52.344l59.426,-50.959l-47.88,0l-40.644,37.873l-17.089,0l0,-37.257l-31.253,0Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default Wordmark
|
||||
export default Wordmark;
|
||||
|
||||
Reference in New Issue
Block a user