Skip to content

Commit

Permalink
fix header fonts; vertex ai icons and other fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
Abhishekbhagwat committed Oct 11, 2024
1 parent d9823de commit 834cdcf
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 64 deletions.
10 changes: 10 additions & 0 deletions search/grounded-generation-playground/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions search/grounded-generation-playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"@radix-ui/react-switch": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@radix-ui/react-tooltip": "^1.1.2",
"@types/react-helmet": "^6.1.11",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"gaxios": "^6.7.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const AboutPageContent: React.FC<AboutPageContentProps> = ({
value="javascript"
className="data-[state=active]:bg-zinc-700 data-[state=active]:text-white text-white"
>
Javascript
JavaScript
</TabsTrigger>
<TabsTrigger
value="python"
Expand Down Expand Up @@ -177,6 +177,7 @@ ${requestStr}
});`;
};

// TODO: abhishekbhgwt@: Update to client library when available
const makePython = (requestObj: RequestObject): string => {
const PROJECT_NUMBER = process.env.PROJECT_NUMBER;
const API_ENDPOINT = `https://discoveryengine.googleapis.com/v1alpha/projects/${PROJECT_NUMBER}/locations/global:streamGenerateGroundedContent`;
Expand Down
68 changes: 44 additions & 24 deletions search/grounded-generation-playground/src/components/ui/icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,42 +79,62 @@ const IconGemini = ({ className, ...props }: React.ComponentProps<'svg'>) => {
const IconVertexAi = ({ className, ...props }: React.ComponentProps<'svg'>) => {
return (
<svg
id="Standard_product_Icon"
data-name="Standard product Icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
fill="currentColor"
version="1.1"
viewBox="0 0 512 512"
className={cn('h-4 w-4', className)}
{...props}
>
<defs>
<style>
{`
.cls-1 {
fill: none;
}
.cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
stroke-width: 0px;
}
.cls-2 {
fill: #34a853;
}
.cls-3 {
fill: #4285f4;
}
.cls-4 {
fill: #ea4335;
}
.cls-5 {
fill: #fbbc04;
}
`}
</style>
</defs>
<g id="bounding_box" data-name="bounding box">
<rect width="32" height="32" fill="none" strokeWidth="0" />
<rect id="bounding_box-2" data-name="bounding box-2" className="cls-1" width="512" height="512"/>
</g>
<g id="art_layer" data-name="art layer">
<path
d="M9,19c-.6,0-1-.5-1-1V4c0-.5.4-1,1-1s1,.5,1,1v14c0,.5-.4,1-1,1Z"
fill="#ea4335"
strokeWidth="0"
/>
<path
d="M23,19c-.5,0-1-.5-1-1V4c0-.5.5-1,1-1s1,.5,1,1v14c0,.5-.5,1-1,1Z"
fill="#4285f4"
strokeWidth="0"
/>
<path
d="M16,29c-.2,0-.4,0-.5-.2l-11-7c-.5-.3-.6-.9-.3-1.4.3-.5.9-.6,1.4-.3l10.5,6.7,10.5-6.7c.5-.3,1.1-.2,1.4.3s.2,1.1-.3,1.4l-11,7c-.2.1-.4.2-.5.2h-.2Z"
fill="#fbbc04"
strokeWidth="0"
/>
<path
d="M16,23c-.6,0-1-.5-1-1v-14c0-.6.4-1,1-1s1,.4,1,1v14c0,.5-.5,1-1,1Z"
fill="#34a853"
strokeWidth="0"
/>
<path className="cls-4" d="M128,249c-8.8,0-16-7.2-16-16v-105c0-8.8,7.2-16,16-16s16,7.2,16,16v105c0,8.8-7.2,16-16,16Z"/>
<path className="cls-5" d="M256,464c-3,0-6-.8-8.6-2.5l-176-112c-7.5-4.7-9.7-14.6-4.9-22.1,4.8-7.5,14.6-9.6,22.1-4.9l167.4,106.5,167.4-106.5c7.5-4.7,17.3-2.5,22.1,4.9,4.7,7.5,2.5,17.3-4.9,22.1l-176,112c-2.6,1.7-5.6,2.5-8.6,2.5h0Z"/>
<path className="cls-2" d="M256,394c-8.8,0-16-7.2-16-16v-73.1c0-8.8,7.2-16,16-16s16,7.2,16,16v73.1c0,8.8-7.2,16-16,16Z"/>
<circle className="cls-4" cx="128" cy="64" r="16"/>
<circle className="cls-4" cx="128" cy="297" r="16"/>
<path className="cls-3" d="M384.2,314c-8.8,0-16-7.1-16-16l-.2-106c0-8.8,7.1-16,16-16h0c8.8,0,16,7.1,16,16l.2,106c0,8.8-7.1,16-16,16h0Z"/>
<circle className="cls-3" cx="384" cy="64" r="16"/>
<circle className="cls-3" cx="384" cy="128" r="16"/>
<path className="cls-5" d="M320,225c-8.8,0-16-7.2-16-16v-103c0-8.8,7.2-16,16-16s16,7.2,16,16v103c0,8.8-7.2,16-16,16Z"/>
<circle className="cls-2" cx="256" cy="177" r="16"/>
<circle className="cls-2" cx="256" cy="241" r="16"/>
<circle className="cls-5" cx="320" cy="273" r="16"/>
<circle className="cls-5" cx="320" cy="337" r="16"/>
<path className="cls-5" d="M192,225c-8.8,0-16-7.2-16-16v-103c0-8.8,7.2-16,16-16s16,7.2,16,16v103c0,8.8-7.2,16-16,16Z"/>
<circle className="cls-5" cx="192" cy="273" r="16"/>
<circle className="cls-5" cx="192" cy="337" r="16"/>
</g>
</svg>
);
};

const IconElastic = ({ className, ...props }: React.ComponentProps<'svg'>) => {
return (
<svg
Expand Down
Original file line number Diff line number Diff line change
@@ -1,53 +1,54 @@
/**
* Copyright 2024 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from 'react';
import { Button } from '@/components/ui/button';
import { Menu } from 'lucide-react';
import { Helmet } from 'react-helmet';

interface PageHeaderProps {
toggleSidebar: () => void;
}

const PageHeader: React.FC<PageHeaderProps> = ({ toggleSidebar }) => {
return (
<header className="bg-zinc-900 shadow-md border-b border-zinc-800">
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<h1
className="text-2xl font-semibold text-transparent bg-clip-text"
style={{
backgroundImage:
'linear-gradient(72.83deg, #4285F4 11.63%, #9b72cb 40.43%, #d96570 68.07%)',
}}
>
Vertex AI Search Grounded Generation Playground
</h1>
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
className="lg:hidden text-white"
>
<Menu className="h-6 w-6" />
</Button>
<>
<Helmet>
<style>
{`
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
.google-sans-header {
font-family: "Google Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-variation-settings: "GRAD" 0;
}
`}
</style>
</Helmet>
<header className="bg-zinc-900 shadow-md border-b border-zinc-800">
<div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between">
<h1
className="text-2xl google-sans-header text-transparent bg-clip-text"
style={{
backgroundImage: 'linear-gradient(72.83deg, #4285F4 11.63%, #9b72cb 40.43%, #d96570 68.07%)',
}}
>
Vertex AI Search Grounded Generation Playground
</h1>
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
className="lg:hidden text-white"
>
<Menu className="h-6 w-6" />
</Button>
</div>
</div>
</div>
</header>
</header>
</>
);
};

export default PageHeader;
export default PageHeader;

0 comments on commit 834cdcf

Please sign in to comment.