Spaces:

Reubencf
/

HF_QR_Gen

Running

App Files Files Community

Reubencf commited on 19 days ago

Commit

fa4d7a4

1 Parent(s): 31d0d62

done

Browse files

Files changed (13) hide show

app/globals.css +1 -1
app/layout.tsx +14 -4
components/HuggingFaceQRGenerator.tsx +79 -35
package-lock.json +11 -1
package.json +2 -1
public/file.svg +0 -1
public/globe.svg +0 -1
public/hf-logo.svg +28 -0
public/logo.svg +29 -0
public/next.svg +0 -1
public/vercel.svg +0 -1
public/window.svg +0 -1
styles/qr-generator.css +11 -9

app/globals.css CHANGED Viewed

@@ -49,7 +49,7 @@
 }
 body {
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }
 :root {

 }
 body {
+  font-family: var(--font-poppins), var(--font-inter), Arial, Helvetica, sans-serif;
 }
 :root {

app/layout.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import "../styles/qr-generator.css";
@@ -18,9 +18,19 @@ const inter = Inter({
   subsets: ["latin"],
 });
 export const metadata: Metadata = {
-  title: "Hugging Face QR Code Generator",
-  description: "Generate beautiful QR codes for Hugging Face profiles with embedded avatars",
 };
 export default function RootLayout({
@@ -31,7 +41,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} antialiased`}
       >
         {children}
       </body>

 import type { Metadata } from "next";
+import { Geist, Geist_Mono, Inter, Poppins } from "next/font/google";
 import "./globals.css";
 import "../styles/qr-generator.css";
   subsets: ["latin"],
 });
+const poppins = Poppins({
+  variable: "--font-poppins",
+  subsets: ["latin"],
+  weight: ["400", "600", "700"],
+});
 export const metadata: Metadata = {
+  title: "HF QR Generator",
+  description: "Generate clean and beautiful QR codes for Hugging Face user profiles, models, datasets, and spaces with custom avatars",
+  icons: {
+    icon: "/hf-logo.svg",
+    apple: "/hf-logo.svg",
+  },
 };
 export default function RootLayout({
   return (
     <html lang="en">
       <body
+        className={`${geistSans.variable} ${geistMono.variable} ${inter.variable} ${poppins.variable} antialiased`}
       >
         {children}
       </body>

components/HuggingFaceQRGenerator.tsx CHANGED Viewed

@@ -11,7 +11,9 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Download, Twitter, Facebook, Linkedin, ChevronLeft } from 'lucide-react';
 const HuggingFaceQRGenerator = () => {
   const [inputUrl, setInputUrl] = useState('');
@@ -182,6 +184,40 @@ const HuggingFaceQRGenerator = () => {
     }
   };
   const getResourceIcon = (type: string) => {
     switch(type) {
       case 'model': return '🤖';
@@ -210,51 +246,53 @@ const HuggingFaceQRGenerator = () => {
     <div className="min-h-screen bg-linear-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900 dark:to-gray-900">
       {/* Input form - hidden when QR is shown */}
       {!showQR && (
-        <div className="min-h-screen grid place-items-center p-6 md:p-10">
           <div className="w-full max-w-2xl mx-auto">
             {/* Input card */}
-            <Card className="shadow-xl">
               <CardHeader className="pb-4">
-                <div className="flex items-center gap-2">
-                  <span className="text-3xl">🤗</span>
-                  <div>
-                    <CardTitle className="text-2xl font-bold tracking-tight">Hugging Face</CardTitle>
-                    <CardDescription className="mt-1 text-muted-foreground">Generate a clean QR code for any Hugging Face profile or resource.</CardDescription>
-                  </div>
                 </div>
               </CardHeader>
               <CardContent className="p-6 md:p-8 space-y-7">
                 <div className="space-y-3">
-                  <Label className="text-xs tracking-wider font-medium">HUGGING FACE USERNAME</Label>
                   <div className="relative">
                     <div className="flex items-stretch overflow-hidden rounded-md border">
-                      <span className="hidden sm:inline-flex items-center px-3 text-sm text-muted-foreground bg-secondary/40 select-none">
                         https://huggingface.co/
                       </span>
                       <Input
                         type="text"
                         value={inputUrl}
                         onChange={(e) => setInputUrl(e.target.value)}
-                        placeholder="username or full URL"
-                        className="h-11 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
                         onKeyPress={(e) => e.key === 'Enter' && handleGenerate()}
                         disabled={loading}
                         aria-invalid={inputIsInvalid}
                         aria-describedby="hf-input-help"
                       />
                     </div>
                   </div>
-                  <p id="hf-input-help" className="text-xs text-muted-foreground">Paste a full URL or just the username, e.g. <span className="font-mono">reubencf</span>.</p>
                 </div>
-                <Button
-                  onClick={handleGenerate}
-                  disabled={!inputUrl || loading}
-                  size="lg"
-                  className="rounded-md w-full sm:w-auto"
-                >
-                  {loading ? 'Generating…' : 'Generate QR Code'}
-                </Button>
                 {error && (
                   <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg text-sm">
@@ -322,23 +360,29 @@ const HuggingFaceQRGenerator = () => {
             </div>
             {/* Share sheet placed below the phone (not part of exported element) */}
             <div className="qr-share-sheet" onClick={(e) => e.stopPropagation()}>
-              <div className="qr-download">
-                <button onClick={() => handleDownload('full')} className="qr-circle">
-                  <Download size={18} />
-                </button>
-                <span>Download</span>
               </div>
               <div className="qr-share-group">
                 <span className="qr-share-label">Share to</span>
                 <div className="qr-share-actions">
-                  <button className="qr-circle" onClick={() => handleShare('linkedin')} aria-label="Share on LinkedIn"><Linkedin size={18} /></button>
-                  <button className="qr-circle" onClick={() => handleShare('facebook')} aria-label="Share on Facebook"><Facebook size={18} /></button>
-                  <button className="qr-circle" onClick={() => handleShare('twitter')} aria-label="Share on X (Twitter)"><Twitter size={18} /></button>
-                </div>
-                <div className="qr-share-texts">
-                  <span>LinkedIn</span>
-                  <span>Facebook</span>
-                  <span>X</span>
                 </div>
               </div>
             </div>

 import { Label } from '@/components/ui/label';
 import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Download, ChevronLeft, Copy } from 'lucide-react';
+import { FaFacebook, FaLinkedin } from 'react-icons/fa';
+import { FaSquareXTwitter } from 'react-icons/fa6';
 const HuggingFaceQRGenerator = () => {
   const [inputUrl, setInputUrl] = useState('');
     }
   };
+  const handleCopyImage = async () => {
+    if (!profileData) return;
+    try {
+      const phoneElement = phoneRef.current;
+      if (!phoneElement) return;
+      const rect = phoneElement.getBoundingClientRect();
+      const dataUrl = await htmlToImage.toPng(phoneElement, {
+        quality: 1.0,
+        pixelRatio: 2,
+        width: Math.ceil(rect.width),
+        height: Math.ceil(rect.height),
+        style: { margin: '0' }
+      });
+      // Convert data URL to blob
+      const response = await fetch(dataUrl);
+      const blob = await response.blob();
+      // Copy to clipboard
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': blob
+        })
+      ]);
+      alert('Image copied to clipboard!');
+    } catch (err) {
+      console.error('Copy error:', err);
+      alert('Failed to copy image. Your browser may not support this feature.');
+    }
+  };
   const getResourceIcon = (type: string) => {
     switch(type) {
       case 'model': return '🤖';
     <div className="min-h-screen bg-linear-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900 dark:to-gray-900">
       {/* Input form - hidden when QR is shown */}
       {!showQR && (
+        <div className="min-h-screen grid place-items-center p-6 md:p-10 bg-white/80">
           <div className="w-full max-w-2xl mx-auto">
             {/* Input card */}
+            <Card className="shadow-xl" style={{ padding: 15, fontFamily: 'var(--font-inter)', boxShadow: '0 10px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06)' }}>
               <CardHeader className="pb-4">
+                <div className="flex flex-col gap-3">
+                  <img src="/logo.svg" alt="Hugging Face" className="h-7 w-auto" />
+                  <CardDescription className="text-muted-foreground" style={{ fontFamily: 'var(--font-inter)' }}>Generate a clean QR code for any Hugging Face profile or resource.</CardDescription>
                 </div>
               </CardHeader>
               <CardContent className="p-6 md:p-8 space-y-7">
                 <div className="space-y-3">
+                  <Label className="text-xs tracking-wider font-medium" style={{ fontFamily: 'var(--font-inter)' }}>HUGGING FACE USERNAME</Label>
                   <div className="relative">
                     <div className="flex items-stretch overflow-hidden rounded-md border">
+                      <span className="hidden sm:inline-flex items-center text-sm text-muted-foreground select-none" style={{ paddingLeft: '8px', paddingRight: '5px', backgroundColor: '#f5f5f5', fontFamily: 'var(--font-inter)' }}>
                         https://huggingface.co/
                       </span>
                       <Input
                         type="text"
                         value={inputUrl}
                         onChange={(e) => setInputUrl(e.target.value)}
+                        placeholder="Reubencf"
+                        className="h-12 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                        style={{ paddingLeft: '3px', paddingRight: '12px', fontFamily: 'var(--font-inter)' }}
                         onKeyPress={(e) => e.key === 'Enter' && handleGenerate()}
                         disabled={loading}
                         aria-invalid={inputIsInvalid}
                         aria-describedby="hf-input-help"
+                        autoFocus
                       />
                     </div>
                   </div>
+                  <p id="hf-input-help" className="text-xs text-muted-foreground" style={{ paddingTop: '5px', paddingBottom: '4px', fontFamily: 'var(--font-inter)' }}>Paste a full URL or just the username, e.g. <span className="font-mono">reubencf</span>.</p>
                 </div>
+                <div className="pt-2 flex justify-end">
+                  <Button
+                    onClick={handleGenerate}
+                    disabled={!inputUrl || loading}
+                    className="rounded-md h-auto bg-neutral-900 text-white hover:bg-neutral-800 disabled:bg-neutral-700 disabled:opacity-100"
+                    style={{ padding: '12px' }}
+                    aria-label="Generate QR Code"
+                  >
+                    {loading ? 'Generating…' : 'Generate QR Code'}
+                  </Button>
+                </div>
                 {error && (
                   <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg text-sm">
             </div>
             {/* Share sheet placed below the phone (not part of exported element) */}
             <div className="qr-share-sheet" onClick={(e) => e.stopPropagation()}>
+              <div className="qr-download-group">
+                <span className="qr-share-label">Actions</span>
+                <div className="qr-download-actions">
+                  <div className="qr-download-item">
+                    <button onClick={() => handleDownload('full')} className="qr-circle" aria-label="Download">
+                      <Download size={18} />
+                    </button>
+                    <span className="qr-action-text">Download</span>
+                  </div>
+                  <div className="qr-download-item">
+                    <button onClick={handleCopyImage} className="qr-circle" aria-label="Copy">
+                      <Copy size={18} />
+                    </button>
+                    <span className="qr-action-text">Copy</span>
+                  </div>
+                </div>
               </div>
               <div className="qr-share-group">
                 <span className="qr-share-label">Share to</span>
                 <div className="qr-share-actions">
+                  <button className="qr-circle" onClick={() => handleShare('linkedin')} aria-label="Share on LinkedIn"><FaLinkedin size={20} /></button>
+                  <button className="qr-circle" onClick={() => handleShare('facebook')} aria-label="Share on Facebook"><FaFacebook size={20} /></button>
+                  <button className="qr-circle" onClick={() => handleShare('twitter')} aria-label="Share on X (Twitter)"><FaSquareXTwitter size={20} /></button>
                 </div>
               </div>
             </div>

package-lock.json CHANGED Viewed

@@ -21,6 +21,7 @@
         "qrcode-generator": "^2.0.4",
         "react": "19.2.0",
         "react-dom": "19.2.0",
         "react-qr-code": "^2.0.18",
         "tailwind-merge": "^3.3.1"
       },
@@ -34,7 +35,7 @@
         "eslint-config-next": "16.0.1",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
-        "typescript": "^5"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -5748,6 +5749,15 @@
         "react": "^19.2.0"
       }
     },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

         "qrcode-generator": "^2.0.4",
         "react": "19.2.0",
         "react-dom": "19.2.0",
+        "react-icons": "^5.5.0",
         "react-qr-code": "^2.0.18",
         "tailwind-merge": "^3.3.1"
       },
         "eslint-config-next": "16.0.1",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
+        "typescript": "5.9.3"
       }
     },
     "node_modules/@alloc/quick-lru": {
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json CHANGED Viewed

@@ -22,6 +22,7 @@
     "qrcode-generator": "^2.0.4",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-qr-code": "^2.0.18",
     "tailwind-merge": "^3.3.1"
   },
@@ -35,6 +36,6 @@
     "eslint-config-next": "16.0.1",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
   }
 }

     "qrcode-generator": "^2.0.4",
     "react": "19.2.0",
     "react-dom": "19.2.0",
+    "react-icons": "^5.5.0",
     "react-qr-code": "^2.0.18",
     "tailwind-merge": "^3.3.1"
   },
     "eslint-config-next": "16.0.1",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3"
   }
 }

public/file.svg DELETED Viewed

public/globe.svg DELETED Viewed

public/hf-logo.svg ADDED Viewed

public/logo.svg ADDED Viewed

public/next.svg DELETED Viewed

public/vercel.svg DELETED Viewed

public/window.svg DELETED Viewed

styles/qr-generator.css CHANGED Viewed

@@ -556,10 +556,10 @@
   border-radius: 18px;
   box-shadow: 0 -8px 24px rgba(0,0,0,.22);
   display: grid;
-  grid-template-columns: 110px 1fr;
-  align-items: center;
-  gap: 8px 12px;
-  padding: 10px 12px 12px;
   font-family: var(--font-inter), var(--font-geist-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }
@@ -574,13 +574,15 @@
   font-size: 18px;
 }
-.qr-download { display:flex; flex-direction: column; align-items: center; gap: 6px; }
 .qr-circle {
   width: 36px; height: 36px; border-radius: 9999px; display:flex; align-items:center; justify-content:center;
   background: #f3f4f6; border: 1px solid #e5e7eb; color:#374151;
   cursor: pointer;
 }
-.qr-share-group { display:grid; grid-template-rows: auto auto auto; gap: 6px; justify-items: center; }
-.qr-share-label { font-size: 12px; color:#6b7280; margin-left: 0; text-align: center; letter-spacing: .02em; }
-.qr-share-actions { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items:center; justify-items: center; }
-.qr-share-texts { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; color:#6b7280; font-size: 12px; text-align: center; }

   border-radius: 18px;
   box-shadow: 0 -8px 24px rgba(0,0,0,.22);
   display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: start;
+  gap: 12px 16px;
+  padding: 12px 16px 14px;
   font-family: var(--font-inter), var(--font-geist-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }
   font-size: 18px;
 }
+.qr-download-group { display:flex; flex-direction: column; gap: 8px; }
+.qr-download-actions { display:flex; gap: 12px; }
+.qr-download-item { display:flex; flex-direction: column; align-items: center; gap: 6px; }
+.qr-action-text { font-size: 11px; color:#6b7280; }
 .qr-circle {
   width: 36px; height: 36px; border-radius: 9999px; display:flex; align-items:center; justify-content:center;
   background: #f3f4f6; border: 1px solid #e5e7eb; color:#374151;
   cursor: pointer;
 }
+.qr-share-group { display:flex; flex-direction: column; gap: 8px; }
+.qr-share-label { font-size: 12px; color:#6b7280; margin-left: 0; text-align: left; letter-spacing: .02em; font-weight: 600; }
+.qr-share-actions { display:flex; gap: 14px; }