xevion/linkpulse
1
0
Fork 0
mirror of https://github.com/Xevion/linkpulse.git synced 2025-12-06 05:15:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add proper SVG icon placeholder

Browse Source
This commit is contained in:
Xevion
2024-11-10 14:59:21 -06:00
parent 3d00970003
commit 6c39716dd6
4 changed files with 25 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/linkpulse.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title> <title>Linkpulse</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

5
frontend/public/linkpulse.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg fill="#000000" viewBox="-8 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<path
d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

13
frontend/src/components/icons.tsx
View File

@@ -1,6 +1,15 @@
type IconProps = React.HTMLAttributes<SVGElement> type IconProps = React.HTMLAttributes<SVGElement>;
export const Icons = { export const Icons = {
linkpulse: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-8 0 512 512" {...props}>
<path
fill="currentColor"
stroke="currentColor"
d="M248 8C111.03 8 0 119.03 0 256s111.03 248 248 248 248-111.03 248-248S384.97 8 248 8zm0 432c-101.69 0-184-82.29-184-184 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184zm0-312c-70.69 0-128 57.31-128 128s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"
/>
</svg>
),
logo: (props: IconProps) => ( logo: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
<rect width="256" height="256" fill="none" /> <rect width="256" height="256" fill="none" />
@@ -145,4 +154,4 @@ export const Icons = {
<path d="M21 12a9 9 0 1 1-6.219-8.56" /> <path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg> </svg>
), ),
} };

40
frontend/src/routes/login.lazy.tsx
View File

@@ -1,38 +1,23 @@
import { createLazyFileRoute } from '@tanstack/react-router' import { createLazyFileRoute } from "@tanstack/react-router";
export const Route = createLazyFileRoute('/login')({ export const Route = createLazyFileRoute("/login")({
component: Login, component: Login,
}) });
import { buttonVariants } from "@/components/ui/button"; import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { UserAuthForm } from "@/components/auth/UserAuthForm"; import { UserAuthForm } from "@/components/auth/UserAuthForm";
import { Icons } from "@/components/icons";
function Login() { function Login() {
return ( return (
<> <>
<div className="md:hidden"> <div className="container relative h-[100vh] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
<img
src="/examples/authentication-light.png"
width={1280}
height={843}
alt="Authentication"
className="block dark:hidden"
/>
<img
src="/examples/authentication-dark.png"
width={1280}
height={843}
alt="Authentication"
className="hidden dark:block"
/>
</div>
<div className="container relative hidden h-[100vh] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
<a <a
href="/examples/authentication" href="/examples/authentication"
className={cn( className={cn(
buttonVariants({ variant: "ghost" }), buttonVariants({ variant: "ghost" }),
"absolute right-4 top-4 md:right-8 md:top-8" "absolute right-4 top-4 md:right-8 md:top-8",
)} )}
> >
Login Login
@@ -40,18 +25,7 @@ function Login() {
<div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex"> <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
<div className="absolute inset-0 bg-zinc-900" /> <div className="absolute inset-0 bg-zinc-900" />
<div className="relative z-20 flex items-center text-lg font-medium"> <div className="relative z-20 flex items-center text-lg font-medium">
<svg <Icons.linkpulse className="mr-2 h-6 w-6 text-white" />
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-6 w-6"
>
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
</svg>
Acme Inc Acme Inc
</div> </div>
<div className="relative z-20 mt-auto"> <div className="relative z-20 mt-auto">