Skip to content

Commit 1a7ba6b

Browse files
ishaan-jaffishaan-jaff
committed
fix add model
1 parent 585c0d6 commit 1a7ba6b

File tree

4 files changed

+694
-90
lines changed

4 files changed

+694
-90
lines changed

‎src/App.svelte‎

Lines changed: 19 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -200,19 +200,6 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
200200
}
201201
</script>
202202

203-
<header class="header">
204-
<div class="header-content">
205-
<div class="logo-section-header">
206-
<span class="logo-emoji">🚅</span>
207-
<span class="logo-text-header">LiteLLM</span>
208-
</div>
209-
<nav class="nav-links">
210-
<a href="https://docs.litellm.ai/docs/" target="_blank" rel="noopener noreferrer" class="nav-link">Docs</a>
211-
<a href="https://github.com/BerriAI/litellm" target="_blank" rel="noopener noreferrer" class="nav-link">GitHub</a>
212-
</nav>
213-
</div>
214-
</header>
215-
216203
<main class="container">
217204
<!-- Hero Section -->
218205
<div class="hero">
@@ -297,9 +284,9 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
297284
<span aria-busy="true" />
298285
{:else}
299286
{#if query != "" && results.length < 12}
300-
<section>
287+
<div class="add-model-section">
301288
<a href={getIssueUrlForAdd(query)}>Add new model?</a>
302-
</section>
289+
</div>
303290
{/if}
304291

305292
<div class="table-container">
@@ -385,63 +372,6 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
385372
--litellm-purple: #8b5cf6;
386373
}
387374
388-
/* Header */
389-
.header {
390-
position: sticky;
391-
top: 0;
392-
z-index: 100;
393-
background-color: rgba(255, 255, 255, 0.95);
394-
backdrop-filter: blur(10px);
395-
border-bottom: 1px solid var(--muted-border-color);
396-
}
397-
398-
.header-content {
399-
max-width: 1400px;
400-
margin: 0 auto;
401-
padding: 1rem 2rem;
402-
display: flex;
403-
align-items: center;
404-
justify-content: space-between;
405-
}
406-
407-
.logo-section-header {
408-
display: flex;
409-
align-items: center;
410-
gap: 0.5rem;
411-
cursor: pointer;
412-
}
413-
414-
.logo-emoji {
415-
font-size: 1.5rem;
416-
line-height: 1;
417-
}
418-
419-
.logo-text-header {
420-
font-size: 1.25rem;
421-
font-weight: 700;
422-
color: var(--contrast);
423-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
424-
}
425-
426-
.nav-links {
427-
display: flex;
428-
align-items: center;
429-
gap: 2rem;
430-
}
431-
432-
.nav-link {
433-
color: var(--contrast);
434-
text-decoration: none;
435-
font-size: 0.9375rem;
436-
font-weight: 500;
437-
transition: color 0.2s ease;
438-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
439-
}
440-
441-
.nav-link:hover {
442-
color: var(--litellm-primary);
443-
}
444-
445375
/* Hero Section */
446376
.hero {
447377
text-align: center;
@@ -615,6 +545,23 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
615545
color: var(--muted-color);
616546
}
617547
548+
/* Add Model Section */
549+
.add-model-section {
550+
max-width: 1400px;
551+
margin: 0 auto 1rem;
552+
padding: 0 2rem;
553+
}
554+
555+
.add-model-section a {
556+
color: #2563eb;
557+
text-decoration: none;
558+
font-size: 0.95rem;
559+
}
560+
561+
.add-model-section a:hover {
562+
text-decoration: underline;
563+
}
564+
618565
/* Table styles */
619566
.table-container {
620567
margin: 2rem auto 4rem;
@@ -800,22 +747,6 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
800747
801748
/* Responsive Design */
802749
@media (max-width: 768px) {
803-
.header-content {
804-
padding: 1rem;
805-
}
806-
807-
.logo-text-header {
808-
font-size: 1.125rem;
809-
}
810-
811-
.nav-links {
812-
gap: 1rem;
813-
}
814-
815-
.nav-link {
816-
font-size: 0.875rem;
817-
}
818-
819750
.hero {
820751
padding: 2rem 1rem;
821752
}

‎src/Main.svelte‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<script lang="ts">
2+
import App from "./App.svelte";
3+
import Providers from "./Providers.svelte";
4+
5+
let activeTab: "models" | "providers" = "models";
6+
7+
const GITHUB_URL = "https://github.com/BerriAI/litellm";
8+
const DOCS_URL = "https://docs.litellm.ai";
9+
</script>
10+
11+
<div class="app-container">
12+
<!-- Header -->
13+
<header class="header">
14+
<div class="header-content">
15+
<div class="logo-section-header">
16+
<span class="logo-emoji">🚅</span>
17+
<span class="logo-text-header">LiteLLM</span>
18+
</div>
19+
<nav class="nav-links">
20+
<a href={DOCS_URL} target="_blank" rel="noopener noreferrer" class="nav-link">Docs</a>
21+
<a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" class="nav-link">GitHub</a>
22+
</nav>
23+
</div>
24+
</header>
25+
26+
<!-- Tabs -->
27+
<div class="tabs-container">
28+
<div class="tabs">
29+
<button
30+
class="tab"
31+
class:active={activeTab === "models"}
32+
on:click={() => activeTab = "models"}
33+
>
34+
Models
35+
</button>
36+
<button
37+
class="tab"
38+
class:active={activeTab === "providers"}
39+
on:click={() => activeTab = "providers"}
40+
>
41+
Providers & Endpoints
42+
</button>
43+
</div>
44+
</div>
45+
46+
<!-- Content -->
47+
{#if activeTab === "models"}
48+
<App />
49+
{:else}
50+
<Providers />
51+
{/if}
52+
</div>
53+
54+
<style>
55+
:root {
56+
--litellm-primary: #6366f1;
57+
--litellm-dark: #4f46e5;
58+
--litellm-purple: #8b5cf6;
59+
}
60+
61+
.app-container {
62+
min-height: 100vh;
63+
}
64+
65+
/* Header */
66+
.header {
67+
background: #ffffff;
68+
border-bottom: 1px solid #e5e7eb;
69+
position: sticky;
70+
top: 0;
71+
z-index: 100;
72+
}
73+
74+
.header-content {
75+
max-width: 1400px;
76+
margin: 0 auto;
77+
padding: 1.25rem 2rem;
78+
display: flex;
79+
align-items: center;
80+
justify-content: space-between;
81+
}
82+
83+
.logo-section-header {
84+
display: flex;
85+
align-items: center;
86+
gap: 0.5rem;
87+
}
88+
89+
.logo-emoji {
90+
font-size: 1.5rem;
91+
}
92+
93+
.logo-text-header {
94+
font-size: 1.25rem;
95+
font-weight: 700;
96+
background: linear-gradient(135deg, var(--litellm-primary) 0%, var(--litellm-purple) 100%);
97+
-webkit-background-clip: text;
98+
-webkit-text-fill-color: transparent;
99+
background-clip: text;
100+
}
101+
102+
.nav-links {
103+
display: flex;
104+
gap: 1.5rem;
105+
align-items: center;
106+
}
107+
108+
.nav-link {
109+
color: var(--contrast);
110+
text-decoration: none;
111+
font-weight: 500;
112+
font-size: 0.9375rem;
113+
transition: color 0.2s ease;
114+
}
115+
116+
.nav-link:hover {
117+
color: var(--litellm-primary);
118+
}
119+
120+
/* Tabs */
121+
.tabs-container {
122+
background: #ffffff;
123+
border-bottom: 1px solid #e5e7eb;
124+
position: sticky;
125+
top: 64px;
126+
z-index: 99;
127+
}
128+
129+
.tabs {
130+
max-width: 1400px;
131+
margin: 0 auto;
132+
padding: 0 2rem;
133+
display: flex;
134+
gap: 0.5rem;
135+
}
136+
137+
.tab {
138+
padding: 1rem 1.5rem;
139+
border: none;
140+
background: transparent;
141+
color: var(--muted-color);
142+
font-weight: 500;
143+
font-size: 0.9375rem;
144+
cursor: pointer;
145+
border-bottom: 2px solid transparent;
146+
transition: all 0.2s ease;
147+
}
148+
149+
.tab:hover {
150+
color: var(--contrast);
151+
}
152+
153+
.tab.active {
154+
color: #2563eb;
155+
border-bottom-color: #2563eb;
156+
}
157+
</style>
158+

0 commit comments

Comments
 (0)