-
Notifications
You must be signed in to change notification settings - Fork 230
Expand file tree
/
Copy pathcode_card.py
More file actions
181 lines (172 loc) · 7.06 KB
/
code_card.py
File metadata and controls
181 lines (172 loc) · 7.06 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
import reflex as rx
import reflex_ui as ui
from reflex.experimental.client_state import ClientStateVar
from pcweb.components.icons.icons import get_icon
@rx.memo
def install_command(
command: str,
show_dollar_sign: bool = True,
) -> rx.Component:
copied = ClientStateVar.create("is_copied", default=False, global_ref=False)
return rx.el.button(
rx.cond(
copied.value,
ui.icon(
"Tick02Icon",
size=14,
class_name="ml-[5px] shrink-0",
),
ui.icon("Copy01Icon", size=14, class_name="shrink-0 ml-[5px]"),
),
rx.text(
rx.cond(
show_dollar_sign,
f"${command}",
command,
),
as_="p",
class_name="font-small text-start truncate",
),
title=command,
on_click=[
rx.call_function(copied.set_value(True)),
rx.set_clipboard(command),
],
on_mouse_down=rx.call_function(copied.set_value(False)).debounce(1500),
class_name="flex items-center gap-1.5 border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small pr-1.5 border rounded-md w-full text-slate-9 transition-bg cursor-pointer overflow-hidden min-w-0 flex-1 h-[24px]",
style={
"opacity": "1",
"cursor": "pointer",
"transition": "background 0.250s ease-out",
"&>svg": {
"transition": "transform 0.250s ease-out, opacity 0.250s ease-out",
},
},
)
def repo(repo_url: str) -> rx.Component:
return rx.link(
get_icon(icon="new_tab", class_name="p-[5px]"),
href=repo_url,
is_external=True,
class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border border-solid rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer shrink-0",
)
def code_card(app: dict) -> rx.Component:
return rx.flex(
rx.box(
rx.el.a(
rx.image(
src=app["image_url"],
loading="lazy",
alt="Image preview for app: " + app["name"],
class_name="size-full duration-150 object-top object-cover hover:scale-105 transition-transform ease-out",
),
href=app["demo_url"],
is_external=True,
),
class_name="relative border-slate-5 border-b border-solid w-full overflow-hidden h-[180px]",
),
rx.box(
rx.box(
rx.el.h4(
app["name"],
class_name="font-smbold text-slate-12 truncate",
),
class_name="flex flex-row justify-between items-center gap-3 p-[0.625rem_0.75rem_0rem_0.75rem] w-full",
),
rx.box(
install_command(
"reflex init --template " + app["demo_url"], show_dollar_sign=False
),
rx.cond(app["source"], repo(app["source"])),
rx.link(
get_icon(icon="eye", class_name="p-[5px]"),
href=app["demo_url"],
is_external=True,
class_name="border-slate-5 bg-slate-1 hover:bg-slate-3 shadow-small border border-solid rounded-md text-slate-9 hover:!text-slate-9 no-underline transition-bg cursor-pointer",
),
class_name="flex flex-row items-center gap-[6px] p-[0rem_0.375rem_0.375rem_0.375rem] w-full",
),
class_name="flex flex-col gap-[10px] w-full",
),
style={
"animation": "fade-in 0.35s ease-out",
"@keyframes fade-in": {
"0%": {"opacity": "0"},
"100%": {"opacity": "1"},
},
},
class_name="box-border flex flex-col border-slate-5 bg-slate-1 shadow-large border rounded-xl w-full h-[280px] overflow-hidden",
)
def gallery_app_card(app: dict[str, str]) -> rx.Component:
return rx.flex(
rx.box(
rx.link(
rx.image(
src=app["image"],
loading="lazy",
alt="Image preview for app: " + app["title"],
class_name="size-full duration-150 object-cover hover:scale-105 transition-transform ease-out",
),
href=f"/docs/getting-started/open-source-templates/{app['title'].replace(' ', '-').lower()}",
),
class_name="relative border-slate-5 border-b border-solid w-full overflow-hidden h-[180px]",
),
rx.box(
rx.box(
rx.el.h6(
app["title"],
class_name="font-smbold text-slate-12 truncate shrink-0",
width="100%",
),
rx.text(
app["description"],
class_name="text-slate-10 font-small truncate text-pretty shrink-0",
width="100%",
),
rx.box(
rx.box(
install_command(
command=f"reflex init --template {app['title']}",
show_dollar_sign=False,
),
*(
[
rx.box(
repo(app["demo"]),
class_name="flex flex-row justify-start",
)
]
if "demo" in app
else []
),
class_name="flex flex-row max-w-full gap-2 w-full shrink-0",
),
rx.box(class_name="grow"),
rx.cond(
"Reflex" in app["author"],
rx.box(
rx.text(
"by",
class_name="text-slate-9 font-small",
),
get_icon(icon="badge_logo"),
rx.text(
app["author"],
class_name="text-slate-9 font-small",
),
class_name="flex flex-row items-start gap-1",
),
rx.text(
f"by {app['author']}",
class_name="text-slate-9 font-small",
),
),
class_name="flex flex-col gap-[6px] size-full",
),
class_name="flex flex-col items-start gap-2 p-[0.625rem_0.75rem_0.625rem_0.75rem] w-full h-full",
),
class_name="flex flex-col gap-[10px] w-full h-full flex-1",
),
key=app["title"],
class_name="box-border flex-col border-slate-5 bg-slate-1 shadow-large border rounded-xl w-full h-[360px] overflow-hidden",
)