mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-06-06 20:15:17 +02:00
feat: add new integrations and update icon handling in the homepage
This commit is contained in:
Anish Sarkar
parent
cf76f6f575
commit
038cdb3ed3
4 changed files with 98 additions and 16 deletions
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
interface Integration {
|
||||
name: string;
|
||||
|
|
@ -44,15 +45,24 @@ const INTEGRATIONS: Integration[] = [
|
|||
|
||||
// Media
|
||||
{ name: "YouTube", icon: "/connectors/youtube.svg" },
|
||||
|
||||
// Search
|
||||
{ name: "Linkup", icon: "/connectors/linkup.svg" },
|
||||
|
||||
// Meetings
|
||||
{ name: "Circleback", icon: "/connectors/circleback.svg" },
|
||||
|
||||
// AI
|
||||
{ name: "MCP", icon: "/connectors/modelcontextprotocol.svg" },
|
||||
];
|
||||
|
||||
// 5 vertical columns — 21 icons spread across categories
|
||||
// 5 vertical columns — 23 icons spread across categories
|
||||
const COLUMNS: number[][] = [
|
||||
[2, 5, 10, 0, 11],
|
||||
[2, 5, 10, 0, 21, 11],
|
||||
[1, 7, 20, 17],
|
||||
[13, 6, 4, 16],
|
||||
[13, 6, 23, 4, 16],
|
||||
[12, 8, 15, 18],
|
||||
[3, 9, 14, 19],
|
||||
[3, 9, 14, 22, 19],
|
||||
];
|
||||
|
||||
// Different scroll speeds per column for organic feel (seconds)
|
||||
|
|
@ -61,7 +71,7 @@ const SCROLL_DURATIONS = [26, 32, 22, 30, 28];
|
|||
function IntegrationCard({ integration }: { integration: Integration }) {
|
||||
return (
|
||||
<div
|
||||
className="w-[60px] h-[60px] sm:w-[80px] sm:h-[80px] md:w-[120px] md:h-[120px] lg:w-[140px] lg:h-[140px] rounded-[16px] sm:rounded-[20px] md:rounded-[24px] flex items-center justify-center shrink-0"
|
||||
className="w-[60px] h-[60px] sm:w-[80px] sm:h-[80px] md:w-[120px] md:h-[120px] lg:w-[140px] lg:h-[140px] rounded-[16px] sm:rounded-[20px] md:rounded-[24px] flex items-center justify-center shrink-0 select-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, var(--card-from), var(--card-to))",
|
||||
|
|
@ -69,12 +79,15 @@ function IntegrationCard({ integration }: { integration: Integration }) {
|
|||
"inset 0 1px 0 0 var(--card-highlight), 0 4px 24px var(--card-shadow)",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={integration.icon}
|
||||
alt={integration.name}
|
||||
className="w-6 h-6 sm:w-7 sm:h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain"
|
||||
loading="lazy"
|
||||
/>
|
||||
<Image
|
||||
src={integration.icon}
|
||||
alt={integration.name}
|
||||
className="w-6 h-6 sm:w-7 sm:h-7 md:w-10 md:h-10 lg:w-12 lg:h-12 object-contain select-none pointer-events-none"
|
||||
loading="lazy"
|
||||
draggable={false}
|
||||
width={48}
|
||||
height={48}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { IconLinkPlus, IconUsersGroup } from "@tabler/icons-react";
|
||||
import { IconUsersGroup } from "@tabler/icons-react";
|
||||
import {
|
||||
BookOpen,
|
||||
File,
|
||||
|
|
@ -15,11 +15,11 @@ import { EnumConnectorName } from "./connector";
|
|||
|
||||
export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
|
||||
const iconProps = { className: className || "h-4 w-4" };
|
||||
const imgProps = { className: className || "h-5 w-5", width: 20, height: 20 };
|
||||
const imgProps = { className: `${className || "h-5 w-5"} select-none pointer-events-none`, width: 20, height: 20, draggable: false as const };
|
||||
|
||||
switch (connectorType) {
|
||||
case EnumConnectorName.LINKUP_API:
|
||||
return <IconLinkPlus {...iconProps} />;
|
||||
case EnumConnectorName.LINKUP_API:
|
||||
return <Image src="/connectors/linkup.svg" alt="Linkup" {...imgProps} />;
|
||||
case EnumConnectorName.LINEAR_CONNECTOR:
|
||||
return <Image src="/connectors/linear.svg" alt="Linear" {...imgProps} />;
|
||||
case EnumConnectorName.GITHUB_CONNECTOR:
|
||||
|
|
@ -63,7 +63,7 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
|
|||
case EnumConnectorName.YOUTUBE_CONNECTOR:
|
||||
return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
|
||||
case EnumConnectorName.CIRCLEBACK_CONNECTOR:
|
||||
return <IconUsersGroup {...iconProps} />;
|
||||
return <Image src="/connectors/circleback.svg" alt="Circleback" {...imgProps} />;
|
||||
case EnumConnectorName.MCP_CONNECTOR:
|
||||
return <Image src="/connectors/modelcontextprotocol.svg" alt="MCP" {...imgProps} />;
|
||||
case EnumConnectorName.OBSIDIAN_CONNECTOR:
|
||||
|
|
|
|||
19
surfsense_web/public/connectors/circleback.svg
Normal file
19
surfsense_web/public/connectors/circleback.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="340.000000pt" height="340.000000pt" viewBox="0 0 340.000000 340.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,340.000000) scale(0.100000,-0.100000)" stroke="none">
|
||||
<path fill="#F24D1D" d="M1385 2574 c-268 -38 -456 -142 -603 -335 -218 -286 -226 -755 -19
|
||||
-1054 110 -159 268 -272 467 -336 67 -21 94 -24 240 -24 185 0 243 11 367 70
|
||||
98 46 157 87 229 161 55 56 143 198 131 210 -8 8 -288 144 -296 144 -4 0 -16
|
||||
-19 -28 -43 -34 -69 -117 -153 -186 -187 -214 -105 -484 -39 -620 152 -121
|
||||
170 -141 455 -46 655 58 123 192 233 320 262 78 18 213 13 282 -10 101 -34
|
||||
202 -120 248 -211 12 -24 23 -44 24 -46 2 -2 295 136 304 144 2 2 -12 33 -30
|
||||
69 -82 165 -266 301 -477 356 -71 18 -247 31 -307 23z"/>
|
||||
<path fill="#4162FE" d="M2575 1135 c-114 -40 -147 -185 -61 -271 65 -65 167 -65 232 0 83 83
|
||||
59 213 -49 265 -50 24 -68 25 -122 6z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
50
surfsense_web/public/connectors/linkup.svg
Normal file
50
surfsense_web/public/connectors/linkup.svg
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="512.000000pt" height="130.000000pt" viewBox="0 0 512.000000 130.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,130.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M470 1287 c-73 -21 -118 -47 -176 -99 -168 -154 -270 -444 -290 -825
|
||||
-9 -174 -12 -172 168 -104 215 79 557 174 779 214 l77 14 6 -36 c3 -20 6 -66
|
||||
6 -102 0 -95 8 -128 34 -135 50 -12 368 132 447 204 56 51 68 81 45 117 -22
|
||||
33 -72 45 -190 45 -89 0 -98 2 -91 17 34 89 46 269 23 347 -16 53 -81 118
|
||||
-134 134 -52 15 -161 16 -221 1 -45 -12 -45 -12 -71 22 -114 150 -278 225
|
||||
-412 186z m201 -74 c51 -23 105 -67 149 -124 l31 -38 -73 -37 c-121 -61 -245
|
||||
-153 -371 -274 -107 -103 -297 -324 -327 -380 -6 -12 -14 -20 -16 -17 -9 8 17
|
||||
220 37 316 68 312 196 513 362 567 55 18 151 12 208 -13z m509 -202 c21 -11
|
||||
45 -35 60 -62 21 -38 25 -56 24 -129 0 -55 -9 -114 -23 -166 l-23 -81 -45 -7
|
||||
c-93 -12 -88 -16 -107 82 -21 103 -65 242 -101 313 -15 28 -24 53 -22 55 9 9
|
||||
124 21 162 17 22 -3 56 -13 75 -22z m-260 -98 c18 -42 38 -97 46 -122 17 -55
|
||||
54 -215 54 -234 0 -9 -32 -19 -97 -31 -160 -30 -467 -110 -643 -169 -91 -30
|
||||
-166 -54 -167 -53 -1 1 37 53 85 116 105 140 318 354 429 433 85 60 224 137
|
||||
248 137 7 0 27 -34 45 -77z m584 -405 c17 -9 16 -12 -10 -39 -29 -30 -174
|
||||
-109 -280 -152 l-62 -25 54 112 53 111 58 6 c69 6 161 0 187 -13z m-314 -3 c0
|
||||
-10 -81 -167 -84 -164 -2 2 -6 39 -10 81 l-7 77 28 4 c45 7 73 7 73 2z"/>
|
||||
<path d="M1880 645 l0 -415 45 0 45 0 0 415 0 415 -45 0 -45 0 0 -415z"/>
|
||||
<path d="M3180 645 l0 -415 45 0 45 0 0 125 c0 82 4 125 11 125 6 0 72 -56
|
||||
147 -125 l136 -125 59 0 c32 0 57 4 55 9 -1 5 -72 71 -155 146 -84 76 -153
|
||||
141 -153 145 0 5 68 68 150 140 83 72 150 133 150 136 0 2 -28 4 -62 4 l-63 0
|
||||
-125 -115 c-69 -63 -131 -114 -137 -114 -10 -1 -13 53 -13 239 l0 240 -45 0
|
||||
-45 0 0 -415z"/>
|
||||
<path d="M2184 1002 c-23 -15 -35 -51 -24 -72 31 -58 110 -39 110 26 0 35 -57
|
||||
66 -86 46z"/>
|
||||
<path d="M4774 820 c-43 -10 -102 -47 -121 -76 -23 -36 -33 -29 -33 21 l0 45
|
||||
-45 0 -45 0 0 -405 0 -405 45 0 45 0 0 160 c0 88 3 160 6 160 4 0 26 -18 49
|
||||
-39 53 -48 108 -65 197 -59 152 11 248 129 248 303 0 97 -23 158 -83 220 -72
|
||||
73 -163 99 -263 75z m171 -114 c52 -40 75 -95 75 -184 0 -87 -15 -127 -63
|
||||
-169 -74 -65 -176 -69 -260 -11 -59 42 -92 165 -68 256 14 49 63 109 106 129
|
||||
19 8 57 12 101 11 60 -3 76 -8 109 -32z"/>
|
||||
<path d="M2654 802 c-22 -11 -55 -37 -72 -58 l-32 -39 0 53 0 52 -50 0 -50 0
|
||||
2 -287 3 -288 45 0 45 0 5 190 c5 199 11 226 57 267 29 26 88 48 130 48 49 -1
|
||||
118 -32 135 -62 9 -16 14 -85 18 -233 l5 -210 45 0 45 0 3 193 c1 109 -2 210
|
||||
-8 231 -14 54 -61 115 -106 136 -57 28 -168 31 -220 7z"/>
|
||||
<path d="M2170 520 l0 -290 45 0 45 0 0 290 0 290 -45 0 -45 0 0 -290z"/>
|
||||
<path d="M3800 619 c0 -212 8 -260 52 -313 46 -56 100 -79 184 -79 81 0 136
|
||||
24 176 77 l23 31 5 -50 5 -50 45 0 45 0 3 288 2 287 -50 0 -50 0 0 -177 c0
|
||||
-193 -9 -232 -61 -280 -52 -47 -158 -59 -216 -23 -58 35 -63 57 -63 280 l0
|
||||
200 -50 0 -50 0 0 -191z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3 KiB |
Loading…
Add table
Add a link
Reference in a new issue