xevion/linkpulse
1
0
Fork 0
mirror of https://github.com/Xevion/linkpulse.git synced 2025-12-06 03: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">
<head>
<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" />
<title>Vite + React + TS</title>
<title>Linkpulse</title>
</head>
<body>
<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 = {
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) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
<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" />
</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,
})
});
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { UserAuthForm } from "@/components/auth/UserAuthForm";
import { Icons } from "@/components/icons";
function Login() {
return (
<>
<div className="md:hidden">
<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">
<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">
<a
href="/examples/authentication"
className={cn(
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
@@ -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="absolute inset-0 bg-zinc-900" />
<div className="relative z-20 flex items-center text-lg font-medium">
<svg
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>
<Icons.linkpulse className="mr-2 h-6 w-6 text-white" />
Acme Inc
</div>
<div className="relative z-20 mt-auto">