-
Notifications
You must be signed in to change notification settings - Fork 152
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement responsive local state management for immediate user feedback
- Loading branch information
1 parent
b5040c8
commit 19f3562
Showing
14 changed files
with
1,024 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
*.db | ||
*.py[cod] | ||
*.web | ||
.web | ||
__pycache__/ |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
"""Welcome to Nextpy! This file outlines the steps to create a basic app.""" | ||
import csv | ||
import nextpy as xt | ||
from gallery import styles | ||
from .templates import template | ||
|
||
image_urls: list[str] = [] | ||
image_urls_csv = "assets/image_urls.csv" | ||
with open(image_urls_csv, "r", newline="\n") as file: | ||
csv_reader = csv.reader(file) | ||
for row in csv_reader: | ||
if len(row) > 0: | ||
url = row[0].strip() | ||
image_urls.append(url) | ||
|
||
|
||
border_radius = ("0.375rem",) | ||
box_shadow = ("0px 0px 0px 1px rgba(84, 82, 95, 0.14)",) | ||
border = "1px solid #F4F3F6" | ||
text_color = "black" | ||
accent_text_color = "#1A1060" | ||
accent_color = "#F5EFFE" | ||
|
||
|
||
def add_item(category): | ||
return xt.vstack( | ||
xt.link( | ||
xt.image( | ||
src=category, | ||
height="100%", | ||
width="100%", | ||
fit="cover", | ||
), | ||
height=["92vw", "15em", "15em", "15em", "15em"], | ||
width=["92vw", "15em", "15em", "15em", "15em"], | ||
href=f"{category}", | ||
), | ||
box_shadow="lg", | ||
bg_color="white", | ||
_hover={ | ||
"box_shadow": "rgba(38, 57, 77, .3) 0px 20px 30px -10px", | ||
}, | ||
class_name = 'm-auto' | ||
) | ||
|
||
|
||
def component_grid(): | ||
return xt.box( | ||
xt.responsive_grid( | ||
xt.foreach(image_urls, add_item), | ||
columns=[1, 2, 3, 4, 5], | ||
gap=2, | ||
), | ||
) | ||
|
||
|
||
def gallery_with_no_sidebar(): | ||
return xt.box( | ||
xt.vstack( | ||
component_grid(), | ||
align_items="stretch", | ||
min_height="80vh", | ||
margin_bottom="2em", | ||
overflow="hidden", | ||
), | ||
class_name="w-max", | ||
flex_direction="column", | ||
overflow="hidden", | ||
position="relative", | ||
) | ||
|
||
class State(xt.State): | ||
count: int = 0 | ||
message: str = "" | ||
|
||
def increment(self): | ||
self.count += 1 | ||
if self.count == 10: | ||
self.message = "Count is 10!" | ||
|
||
def decrement(self): | ||
self.count -= 1 | ||
if self.count < 10: | ||
self.message = "" | ||
|
||
|
||
@template(route="/", title="GALLERY") | ||
def gallery() -> xt.Component: | ||
return xt.vstack( | ||
xt.vstack( | ||
xt.text(State.message, font_size="2em", text_color="white"), | ||
xt.input(value=State.message, on_change=State.set_message), | ||
xt.divider(), | ||
align_items="center", | ||
), | ||
margin_top="2em", | ||
height="100%", | ||
position="relative", | ||
overflow_x="hidden", | ||
) | ||
|
||
|
||
# Add state and page to the app. | ||
app = xt.App( | ||
stylesheets=[ | ||
"https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=Inter&display=swap",] | ||
) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
from .styles import * | ||
from .colors import * | ||
from .fonts import * |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
colors = { | ||
"white": "#FFFFFF", | ||
"red": { | ||
50: "#FFF1F1", | ||
100: "#FFDADA", | ||
200: "#FFADAD", | ||
300: "#FF7070", | ||
400: "#FF3838", | ||
500: "#FF0000", | ||
600: "#DB0000", | ||
700: "#8B0000", | ||
800: "#420000", | ||
900: "#140000", | ||
}, | ||
"orange": { | ||
50: "#FFF8F1", | ||
100: "#FFECDA", | ||
200: "#FFD1B1", | ||
300: "#FFAB7D", | ||
400: "#FF7C3F", | ||
500: "#FF4F00", | ||
600: "#DB3D00", | ||
700: "#8B1F00", | ||
800: "#4C0A00", | ||
900: "#170000", | ||
}, | ||
"green": { | ||
50: "#F3FFFA", | ||
100: "#CEFFEE", | ||
200: "#9BFFDD", | ||
300: "#57FFC5", | ||
400: "#00FFA8", | ||
500: "#00D98F", | ||
600: "#00A86E", | ||
700: "#00734C", | ||
800: "#00402A", | ||
900: "#00170F", | ||
}, | ||
"blue": { | ||
50: "#F3F7FE", | ||
100: "#DEEAFD", | ||
200: "#BED5FA", | ||
300: "#97BBF5", | ||
400: "#6B9EED", | ||
500: "#2678EB", | ||
600: "#2C61B5", | ||
700: "#1A4589", | ||
800: "#0C2755", | ||
900: "#030F23", | ||
}, | ||
"violet": { | ||
50: "#F5EFFE", | ||
100: "#D5C2FB", | ||
200: "#AD9BF8", | ||
300: "#9580F7", | ||
400: "#7E69E0", | ||
500: "#5646ED", | ||
600: "#2B199C", | ||
700: "#20117E", | ||
800: "#1A1060", | ||
900: "#03030B", | ||
}, | ||
"indigo": { | ||
50: "#FAF8FB", | ||
100: "#EAE4FD", | ||
200: "#DACEEE", | ||
300: "#AA9EC3", | ||
400: "#82799E", | ||
500: "#696287", | ||
600: "#494369", | ||
700: "#342E5C", | ||
800: "#1F1944", | ||
900: "#110F1F", | ||
}, | ||
"gray": { | ||
50: "#FEFDFF", | ||
100: "#F4F3F6", | ||
200: "#CDCCD1", | ||
300: "#B3B2B9", | ||
400: "#97959F", | ||
500: "#777583", | ||
600: "#5C5B66", | ||
700: "#3E3E44", | ||
800: "#242528", | ||
900: "31A1A1D", | ||
}, | ||
} | ||
|
||
text_colors = { | ||
"docs": { | ||
"header": colors["indigo"][800], | ||
"body": colors["indigo"][700], | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
font_weights = { | ||
"bold": "800", | ||
"heading": "700", | ||
"subheading": "600", | ||
"section": "600", | ||
} |
Oops, something went wrong.