External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

checker pattern for brand asset cards (branding page)

Browse Source
This commit is contained in:
Maze Winther
2026-03-04 16:45:03 +01:00
parent 24dac1232c
commit ed8815c755
1 changed files with 39 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/brand/page.tsx
+39 -22
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import type { CSSProperties } from "react";
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { Check, Copy, Download } from "lucide-react"; import { Check, Copy, Download } from "lucide-react";
@@ -24,8 +25,7 @@ async function copyAsset(src: string) {
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
} }
const ALL_ASSETS = () => const ALL_ASSETS = () => ASSET_SECTIONS.flatMap((s) => s.assets);
ASSET_SECTIONS.flatMap((s) => s.assets);
type AssetTheme = "dark" | "light" | "icon"; type AssetTheme = "dark" | "light" | "icon";
@@ -118,21 +118,21 @@ export default function BrandPage() {
</Link> </Link>
</> </>
} }
action={ action={
<Button <Button
variant="outline" variant="outline"
size="lg" size="lg"
className="mx-auto gap-2" className="mx-auto gap-2"
onClick={() => { onClick={() => {
ALL_ASSETS().forEach((asset, i) => { ALL_ASSETS().forEach((asset, i) => {
setTimeout(() => downloadAsset(asset.src), i * 200); setTimeout(() => downloadAsset(asset.src), i * 200);
}); });
}} }}
> >
<Download /> <Download />
Download all Download all
</Button> </Button>
} }
> >
<div className="flex flex-col gap-10"> <div className="flex flex-col gap-10">
{ASSET_SECTIONS.map((section) => ( {ASSET_SECTIONS.map((section) => (
@@ -202,6 +202,23 @@ export default function BrandPage() {
); );
} }
const CHECKER_STYLES: Record<"dark" | "light", CSSProperties> = {
light: {
backgroundImage:
"linear-gradient(45deg, #292929 25%, transparent 25%), linear-gradient(-45deg, #292929 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #292929 75%), linear-gradient(-45deg, transparent 75%, #292929 75%)",
backgroundSize: "18px 18px",
backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
backgroundColor: "#000",
},
dark: {
backgroundImage:
"linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%)",
backgroundSize: "18px 18px",
backgroundPosition: "0 0, 0 9px, 9px -9px, -9px 0px",
backgroundColor: "#f5f5f5",
},
};
function AssetCard({ variant }: { variant: AssetVariant }) { function AssetCard({ variant }: { variant: AssetVariant }) {
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
@@ -213,10 +230,10 @@ function AssetCard({ variant }: { variant: AssetVariant }) {
return ( return (
<Card <Card
className={cn( className="group relative overflow-hidden"
"group relative overflow-hidden", style={
variant.theme === "light" ? "bg-black" : "bg-white", variant.theme === "icon" ? undefined : CHECKER_STYLES[variant.theme]
)} }
> >
<div className="flex h-56 items-center justify-center px-12 py-8"> <div className="flex h-56 items-center justify-center px-12 py-8">
<Image <Image
@@ -230,7 +247,7 @@ function AssetCard({ variant }: { variant: AssetVariant }) {
/> />
</div> </div>
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9" className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 size-9"