Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip: blobs background component first sketch, introduced svg folder, … #70

Merged
merged 3 commits into from
Dec 3, 2024
Merged

wip: blobs background component first sketch, introduced svg folder, … #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0433a3b
wip: blobs background component first sketch, introduced svg folder, …
mewdev Nov 23, 2024
1b76872
fix: fixed svg fillRule and clipRule props and typos in imports
mewdev Nov 26, 2024
1a6780e
lint fix
martinwenisch Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/web/app/[lang]/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
"use client";

import Link from "next/link";

import "../globals.css";
import "@repo/design-system/styles";
import "@repo/design-system/themes/theme-default";
import { Blobs } from "@repo/design-system/ui";

export default function RootLayout({
params: { lang },
Expand All @@ -22,6 +25,7 @@ export default function RootLayout({
</head>
<body>
<main className="grid gap-8 p-4">
<Blobs />
<header className="grid gap-2">
<Link href="/cs">
<h1 className="text-5xl font-semibold">Kalkulacka.1</h1>
Expand Down
1 change: 1 addition & 0 deletions packages/design-system/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"private": true,
"exports": {
"./ui": "./src/ui/index.ts",
"./svg": "./src/svg/index.ts",
"./themes/*": "./src/themes/*.css",
"./styles": "./dist/index.css",
"./fonts": "./dist/fonts",
Expand Down
19 changes: 19 additions & 0 deletions packages/design-system/src/svg/blueBlob.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export function BlueBlob(
props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 514 593"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M302.879 30.1948C358.288 16.1054 427.597 -21.5224 470.34 16.5407C515.481 56.7398 478.145 133.79 486.535 193.745C492.041 233.086 510.149 268.165 511.109 307.88C512.228 354.162 523.432 408.264 492.551 442.676C461.642 477.119 401.595 453.819 360.733 475.45C303.748 505.615 273.967 605.355 210.979 591.729C150.127 578.564 163.142 480.298 132.349 426.041C109.293 385.416 71.9257 356.684 53.2705 313.847C29.3611 258.944 -20.6292 195.256 9.25344 143.38C40.0842 89.8587 124.816 111.949 182.347 89.7716C225.021 73.3217 258.563 41.4635 302.879 30.1948Z"
fill="#EAF7FF"
/>
</svg>
);
}
2 changes: 2 additions & 0 deletions packages/design-system/src/svg/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from "./blueBlob";
export * from "./redBlob";
19 changes: 19 additions & 0 deletions packages/design-system/src/svg/redBlob.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export function RedBlob(
props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 559 585"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M304.641 5.20988C361.63 25.6324 358.537 113.375 404.781 152.489C441.582 183.615 508.998 163.131 537.412 202.087C565.674 240.837 564.478 299.74 543.729 342.994C523.866 384.402 461.091 383.645 432.926 419.903C402.069 459.627 417.825 527.018 377.476 557.018C336.182 587.722 274.343 593.374 227.149 572.904C180.597 552.712 174.141 488.855 138.034 453.163C97.3028 412.9 20.6954 406.617 3.59166 351.917C-13.2064 298.195 33.0223 246.191 57.4665 195.499C81.3733 145.921 101.118 92.8387 144.701 59.2864C190.236 24.2304 250.566 -14.1686 304.641 5.20988Z"
fill="#FFF4F5"
/>
</svg>
);
}
16 changes: 16 additions & 0 deletions packages/design-system/src/ui/blobs/blobs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { RedBlob, BlueBlob } from "@repo/design-system/svg";

const Blobs = () => {
return (
// background div - needs top placement
<div className="k1-h-full k1-w-full">
{/* blobs div */}
<div className="k1-fixed -k1-z-10 k1-h-full k1-w-full">
<BlueBlob className="k1-fixed k1-left-[5%] k1-top-[10%] k1-h-4/5 k1-blur-[120px]" />
<RedBlob className="k1-fixed k1-left-1/2 k1-top-[20%] k1-h-4/5 k1-blur-[120px]" />
</div>
</div>
);
};

export { Blobs };
1 change: 1 addition & 0 deletions packages/design-system/src/ui/blobs/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./blobs";
1 change: 1 addition & 0 deletions packages/design-system/src/ui/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export * from "./button/index";
export * from "./card/index";
export * from "./progress/index";
export * from "./question/index";
export * from "./blobs";
Loading