Skip to content

Commit

Permalink
Merge branch 'main' into link-folders
Browse files Browse the repository at this point in the history
  • Loading branch information
@devkiran
devkiran authored Feb 8, 2025
2 parents 948b8f4 + eebb9fd commit ca67230
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 114 deletions.
151 changes: 54 additions & 97 deletions apps/web/app/app.dub.co/embed/inline/hero-background.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
"use client";

import { BlurImage } from "@dub/ui";
import { useId } from "react";
import { cn } from "@dub/utils";
import { CSSProperties, useId } from "react";

export function HeroBackground({
logo,
Expand All @@ -12,20 +13,22 @@ export function HeroBackground({
}) {
const id = useId();

const backgroundColor = color || "#737373";

return (
<div className="absolute inset-0 -z-[1]" style={{ color: backgroundColor }}>
<div className="absolute inset-0 -z-[1] bg-current opacity-10" />

<div className="absolute right-4 top-4 block size-6 min-[300px]:size-10 md:hidden">
{logo && (
<BlurImage
src={logo}
alt="Program Logo"
fill
className="absolute object-cover object-center"
/>
<div
className="absolute inset-0 isolate -z-[1] overflow-hidden bg-neutral-50 [container-type:size]"
style={
{
color: color || "#737373",
"--brand": color || "#737373",
"--brand-dark": "oklch(from var(--brand) 0.38 min(c, 0.17) h)",
} as CSSProperties
}
>
<div className="absolute inset-0 [mask-image:linear-gradient(90deg,transparent_40%,black)]">
{color ? (
<div className="absolute inset-0 bg-current opacity-10" />
) : (
<RainbowGradient className="opacity-15" />
)}
</div>

Expand All @@ -35,7 +38,7 @@ export function HeroBackground({
height="258"
fill="none"
viewBox="0 0 718 258"
className="absolute right-0 top-0 hidden h-full w-auto md:block"
className="pointer-events-none absolute right-0 top-0 hidden h-full w-auto md:block"
>
<mask
id={`${id}-grid-mask`}
Expand All @@ -55,16 +58,6 @@ export function HeroBackground({
height="100%"
/>
<g clipPath={`url(#${id}-a)`}>
<g filter={`url(#${id}-b)`} opacity="0.1">
<circle
cx="450"
cy="450"
r="450"
fill="currentColor"
opacity="0.5"
transform="matrix(-1 0 0 1 1228 -445)"
/>
</g>
<g filter={`url(#${id}-d)`}>
<path
fill={`url(#${id}-e)`}
Expand All @@ -77,16 +70,6 @@ export function HeroBackground({
strokeWidth="0.75"
d="M478 65c0-8.837 7.163-16 16-16h128c8.837 0 16 7.163 16 16v128c0 8.837-7.163 16-16 16H494c-8.837 0-16-7.163-16-16z"
/>
<g filter={`url(#${id}-f)`}>
<rect
width="80"
height="80"
x="518"
y="87"
fill={`url(#${id}-logo)`}
rx="40"
/>
</g>
<mask
id={`${id}-h`}
width="319"
Expand Down Expand Up @@ -162,26 +145,6 @@ export function HeroBackground({
</g>
</g>
<defs>
<filter
id={`${id}-b`}
width="1140"
height="1140"
x="208"
y="-565"
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
result="effect1_foregroundBlur_21_5513"
stdDeviation="60"
/>
</filter>
<filter
id={`${id}-d`}
width="160.75"
Expand All @@ -208,34 +171,6 @@ export function HeroBackground({
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
<feBlend in2="shape" result="effect1_innerShadow_21_5513" />
</filter>
<filter
id={`${id}-f`}
width="100"
height="100"
x="508"
y="77"
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
result="hardAlpha"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
/>
<feOffset />
<feGaussianBlur stdDeviation="5" />
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend
in2="BackgroundImageFix"
result="effect1_dropShadow_21_5513"
/>
<feBlend
in="SourceGraphic"
in2="effect1_dropShadow_21_5513"
result="shape"
/>
</filter>
<filter
id={`${id}-i`}
width="40.75"
Expand Down Expand Up @@ -355,22 +290,44 @@ export function HeroBackground({
strokeWidth={1}
/>
</pattern>
<pattern
id={`${id}-logo`}
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<use xlinkHref={`#${id}-logo-image`} transform="scale(0.0025)" />
</pattern>
<image
id={`${id}-logo-image`}
width="400"
height="400"
xlinkHref={logo || ""}
/>
</defs>
</svg>

<div className="absolute inset-0 mix-blend-soft-light [mask-image:linear-gradient(90deg,transparent_40%,black)]">
{color ? (
<div className="absolute inset-0 bg-current" />
) : (
<RainbowGradient />
)}
</div>

<div
className={cn(
"absolute right-4 top-4 block size-6 min-[300px]:size-8",

// Position based on cqh to adjust for container height
"md:right-[62cqh] md:top-1/2 md:size-[32cqh] md:-translate-y-1/2 md:translate-x-1/2",

"drop-shadow-[0_0_15px_rgb(from_var(--brand-dark,#000)_r_g_b/0.4)]",
)}
>
{logo && (
<BlurImage
src={logo}
alt="Program Logo"
fill
className="absolute object-cover object-center"
/>
)}
</div>
</div>
);
}

function RainbowGradient({ className }: { className?: string }) {
return (
<div className={cn("absolute inset-0 saturate-[1.5]", className)}>
<div className="absolute right-[62cqh] top-1/2 aspect-square h-[200%] -translate-y-1/2 translate-x-1/2 rounded-full bg-[conic-gradient(from_-66deg_at_50%_50%,#855AFC_-32deg,#f00_63deg,#EAB308_158deg,#5CFF80_240deg,#855AFC_328deg,#f00_423deg)] blur-[50px]" />
</div>
);
}
4 changes: 2 additions & 2 deletions apps/web/app/app.dub.co/embed/inline/loading.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Copy, MoneyBill2, Wordmark } from "@dub/ui";
import { Button, Copy, MoneyBill, Wordmark } from "@dub/ui";
import { HeroBackground } from "./hero-background";

export default function EmbedInlineLoading() {
Expand All @@ -9,7 +9,7 @@ export default function EmbedInlineLoading() {
<div className="relative flex flex-col overflow-hidden rounded-lg border border-neutral-300 p-4 md:p-6">
<HeroBackground />
<span className="flex items-center gap-2 text-sm text-neutral-500">
<MoneyBill2 className="size-4" />
<MoneyBill className="size-4" />
Refer and earn
</span>
<div className="relative mt-16 flex flex-col gap-2">
Expand Down
24 changes: 14 additions & 10 deletions apps/web/app/app.dub.co/embed/inline/page-client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Button,
Check,
Copy,
MoneyBill2,
MoneyBill,
ToggleGroup,
useCopyToClipboard,
Wordmark,
Expand Down Expand Up @@ -60,7 +60,7 @@ export function EmbedInlinePageClient({
<div className="relative flex flex-col overflow-hidden rounded-lg border border-neutral-300 p-4 md:p-6">
<HeroBackground logo={program.logo} color={program.brandColor} />
<span className="flex items-center gap-2 text-sm text-neutral-500">
<MoneyBill2 className="size-4" />
<MoneyBill className="size-4" />
Refer and earn
</span>
<div className="relative mt-16 text-lg text-neutral-900 sm:max-w-[50%]">
Expand Down Expand Up @@ -105,14 +105,18 @@ export function EmbedInlinePageClient({
onClick={() => copyToClipboard(links[0].shortLink)}
/>
</div>
<a
href="https://dub.partners"
target="_blank"
className="mt-4 flex items-center justify-center gap-1.5 text-neutral-500 transition-colors duration-75 hover:text-neutral-700 md:absolute md:bottom-3 md:right-3 md:mt-0 md:translate-x-0"
>
<p className="text-xs font-medium">Powered by</p>
<Wordmark className="h-3.5 text-neutral-900" />
</a>
<div className="mt-4 flex justify-center md:absolute md:bottom-3 md:right-3 md:mt-0">
<a
href="https://dub.partners"
target="_blank"
className="flex w-fit items-center gap-1.5 rounded-md border border-black/10 bg-white px-2 py-1 text-neutral-500 transition-colors duration-75 hover:text-neutral-700"
>
<p className="whitespace-nowrap text-xs font-medium leading-none">
Powered by
</p>
<Wordmark className="h-3.5 text-neutral-900" />
</a>
</div>
</div>
<div className="mt-4 grid gap-2 sm:h-32 sm:grid-cols-3">
<EmbedActivity
Expand Down
4 changes: 2 additions & 2 deletions apps/web/app/partners.dub.co/(dashboard)/programs/[programSlug]/page-client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
XAxis,
YAxis,
} from "@dub/ui/charts";
import { Check, Copy, LoadingSpinner, MoneyBill2 } from "@dub/ui/icons";
import { Check, Copy, LoadingSpinner, MoneyBill } from "@dub/ui/icons";
import { cn, currencyFormatter, getPrettyUrl } from "@dub/utils";
import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
import { LinearGradient } from "@visx/gradient";
Expand Down Expand Up @@ -65,7 +65,7 @@ export default function ProgramPageClient() {
<HeroBackground logo={program.logo} color={program.brandColor} />
)}
<span className="flex items-center gap-2 text-sm text-neutral-500">
<MoneyBill2 className="size-4" />
<MoneyBill className="size-4" />
Refer and earn
</span>
<div className="relative mt-24 text-lg text-neutral-900 sm:max-w-[50%]">
Expand Down
6 changes: 3 additions & 3 deletions apps/web/ui/links/link-details-column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ function TagButton({ tag, plus }: { tag: TagProps; plus?: number }) {
}

function AnalyticsBadge({ link }: { link: ResponseLink }) {
const { slug } = useWorkspace();
const { slug, plan } = useWorkspace();
const { domain, key, trackConversion, clicks, leads, saleAmount } = link;

const { isMobile } = useMediaQuery();
Expand Down Expand Up @@ -189,7 +189,7 @@ function AnalyticsBadge({ link }: { link: ResponseLink }) {

return isMobile ? (
<Link
href={`/${slug}/analytics?domain=${domain}&key=${key}&interval=all`}
href={`/${slug}/analytics?domain=${domain}&key=${key}&interval=${plan === "free" ? "30d" : plan === "pro" ? "1y" : "all"}`}
className="flex items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-0.5 text-sm text-gray-800"
>
<CursorRays className="h-4 w-4 text-gray-600" />
Expand Down Expand Up @@ -245,7 +245,7 @@ function AnalyticsBadge({ link }: { link: ResponseLink }) {
}
>
<Link
href={`/${slug}/analytics?domain=${domain}&key=${key}&interval=all`}
href={`/${slug}/analytics?domain=${domain}&key=${key}&interval=${plan === "free" ? "30d" : plan === "pro" ? "1y" : "all"}`}
className={cn(
"overflow-hidden rounded-md border border-gray-200 bg-gray-50 p-0.5 text-sm text-gray-600 transition-colors",
variant === "loose" ? "hover:bg-gray-100" : "hover:bg-white",
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/icons/nucleo/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export * from "./map-position";
export * from "./menu3";
export * from "./message-smile";
export * from "./mobile-phone";
export * from "./money-bill";
export * from "./money-bill2";
export * from "./money-bills2";
export * from "./note";
Expand Down
41 changes: 41 additions & 0 deletions packages/ui/src/icons/nucleo/money-bill.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { SVGProps } from "react";

export function MoneyBill(props: SVGProps<SVGSVGElement>) {
return (
<svg
height="18"
width="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g fill="currentColor">
<circle
cx="9"
cy="9"
fill="none"
r="2"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<circle cx="4.25" cy="9" fill="currentColor" r=".75" stroke="none" />
<circle cx="13.75" cy="9" fill="currentColor" r=".75" stroke="none" />
<rect
height="10.5"
width="14.5"
fill="none"
rx="2"
ry="2"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
x="1.75"
y="3.75"
/>
</g>
</svg>
);
}

0 comments on commit ca67230

Please sign in to comment.