Hugging Face's logo

Spaces:
enzostvs
/
hugger-lover
Running

App Files Community
hugger-lover
File size: 3,128 Bytes 
7f5876d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
import { getRoast } from "@/app/actions/roast";
import Image from "next/image";
import { ImageResponse } from "next/og";
import { NextRequest } from "next/server";

import Logo from "@/assets/logo.svg";

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  const { slug } = params;
  const roast = await getRoast({ id: slug });

  if (!roast?.data) {
    return undefined;
  }

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 40,
          color: "black",
          background: "#f4f4f5",
          width: "100%",
          height: "100%",
          padding: "40px",
          textAlign: "left",
          justifyContent: "center",
          alignItems: "flex-start",
          display: "flex",
          position: "relative",
          flexDirection: "column",
        }}
      >
        <div
          style={{
            overflow: "hidden",
            position: "relative",
            width: "100%",
            height: "100%",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "flex-start",
            // border: "1px solid #d4d4d8",
            background: "white",
            borderRadius: 40,
            padding: "60px 50px",
            boxShadow:
              "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
          }}
        >
          <div
            style={{
              letterSpacing: 10,
              fontSize: 26,
              margin: 0,
              marginBottom: 20,
              color: "#71717a",
              display: "flex",
              alignItems: "center",
              justifyContent: "flex-start",
            }}
          >
            <img
              src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
              alt="logo hugging face"
              style={{
                width: 50,
                height: 50,
                marginRight: 20,
                objectFit: "contain",
              }}
            />
            HUGGER LOVER
          </div>
          <p
            style={{
              fontSize: 35,
              margin: 0,
              lineHeight: 1.4,
              color: "#3f3f46",
              whiteSpace: "break-spaces",
              lineClamp: 2,
              marginTop: 10,
              textWrap: "pretty",
            }}
          >
            {roast.data.text}...
          </p>
          <p
            style={{
              position: "absolute",
              bottom: -100,
              right: -10,
              fontSize: 240,
              opacity: 0.5,
            }}
          >
            💝
          </p>
          <div
            style={{
              width: "100vw",
              height: "200px",
              background:
                "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, white 100%)",
              position: "absolute",
              bottom: 0,
              left: 0,
            }}
          ></div>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}