jbilcke-hf HF staff commited on
Commit
cac934a
1 Parent(s): 26a5802

working on the chrome

Browse files
src/components/chrome/index.tsx ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import svg1 from "./svg1.svg"
2
+ import svg2 from "./svg2.svg"
3
+ import svg3 from "./svg3.svg"
4
+
5
+ export function HuggingFaceChrome() {
6
+ return (
7
+ <div className="
8
+ from-gray-50-to-white text-md shadow-alternate fixed
9
+ right-6 top-5 z-20 flex h-[40px] items-stretch gap-3
10
+ overflow-hidden rounded-xl
11
+ border border-gray-200 bg-gradient-to-t pl-4
12
+ text-gray-500 dark:border-gray-800 max-sm:hidden
13
+ ">
14
+ <div className="flex flex-none items-center">
15
+ <div className="relative mr-1.5 flex items-center">
16
+ <img alt="" className="w-3.5 h-3.5 rounded-full flex-none" src="https://cdn-avatars.huggingface.co/v1/production/uploads/64f73f25098581ab15e2f5ad/d2mDoZd292LK7j6ZT4mNX.png" crossOrigin="anonymous" />
17
+ </div>
18
+ <a href="/jbilcke-hf" className="hover:text-blue-600">enzostvs</a>
19
+ <div className="mx-0.5 text-gray-300">/</div>
20
+ <a className="font-mono font-semibold text-gray-800 hover:text-blue-600" href="/spaces/jbilcke-hf/ai-stories-factory">ai-stories-factory</a>
21
+ </div>
22
+ <div className="inline-flex items-center overflow-hidden whitespace-nowrap rounded-md border bg-white text-sm leading-none text-gray-500 flex-none self-center ">
23
+ <button className="relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 p-1 hover:bg-gradient-to-t focus:outline-none" title="Unlike">
24
+ {
25
+ // svg1
26
+ } {
27
+ //svg2
28
+ }
29
+ <span className="ml-4 pl-0.5 hidden">like</span>
30
+ </button>
31
+ <button
32
+ className="flex items-center border-l px-1.5 py-1 text-gray-400 hover:bg-gray-50 focus:bg-gray-100 focus:outline-none dark:hover:bg-gray-900 dark:focus:bg-gray-800"
33
+ title="See users who liked this repository">
34
+ TODO
35
+ </button>
36
+ </div>
37
+ <button
38
+ className="relative flex h-[38px] w-[38px] items-center justify-center border-l border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800"
39
+ title="Show space menu">
40
+ {
41
+ //svg3
42
+ }
43
+ </button>
44
+ </div>
45
+ )
46
+ }
src/components/chrome/svg1.svg ADDED
src/components/chrome/svg2.svg ADDED
src/components/chrome/svg3.svg ADDED