start
This commit is contained in:
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
38
astro.config.mjs
Normal file
38
astro.config.mjs
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import sitemap from '@astrojs/sitemap'
|
||||||
|
import tailwind from '@astrojs/tailwind'
|
||||||
|
import vue from "@astrojs/vue"
|
||||||
|
import { defineConfig } from 'astro/config'
|
||||||
|
const DEV_PORT = 2121;
|
||||||
|
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: process.env.CI ? 'https://###.github.io'
|
||||||
|
//: `https://fipi.pro`,
|
||||||
|
//: `https://we-property.ru`,
|
||||||
|
: `http://localhost:${DEV_PORT}`,
|
||||||
|
base: process.env.CI ? '/we-property-astro-admin-dashboard' : undefined,
|
||||||
|
// output: 'server',
|
||||||
|
|
||||||
|
/* Like Vercel, Netlify,… Mimicking for dev. server */
|
||||||
|
// trailingSlash: 'always',
|
||||||
|
|
||||||
|
server: {
|
||||||
|
address: 'http://127.0.0.1:8000/api/',
|
||||||
|
//address: 'https://fipi.pro/api/',
|
||||||
|
/* Dev. server only */
|
||||||
|
port: DEV_PORT
|
||||||
|
},
|
||||||
|
integrations: [
|
||||||
|
//
|
||||||
|
sitemap(), tailwind(), vue({
|
||||||
|
template: {
|
||||||
|
compilerOptions: {
|
||||||
|
// treat any tag that starts with ion- as custom elements
|
||||||
|
isCustomElement: (tag) => tag.startsWith('ion-'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// ...
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
});
|
||||||
218
data/products.json
Normal file
218
data/products.json
Normal file
@@ -0,0 +1,218 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194556,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 623232,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "10%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194356,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 323323,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 994856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "25%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194256,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "10%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 623378,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 192856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 523323,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 191857,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 914856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "30%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 633293,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194556,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 623232,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194356,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "5%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 323323,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 994856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 194256,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 623378,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "50%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 192856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 523323,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 191857,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "10%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Education Dashboard",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "Angular",
|
||||||
|
"id": 914856,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$149",
|
||||||
|
"discount": "No"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "React UI Kit",
|
||||||
|
"category": "Html templates",
|
||||||
|
"technology": "React JS",
|
||||||
|
"id": 633293,
|
||||||
|
"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
|
||||||
|
"price": "$129",
|
||||||
|
"discount": "No"
|
||||||
|
}
|
||||||
|
]
|
||||||
202
data/users.json
Normal file
202
data/users.json
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"name": "Neil Sims",
|
||||||
|
"avatar": "neil-sims.png",
|
||||||
|
"email": "neil.sims@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Front-end developer",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"name": "Roberta Casas",
|
||||||
|
"avatar": "roberta-casas.png",
|
||||||
|
"email": "roberta.casas@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Designer",
|
||||||
|
"country": "Spain",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"name": "Michael Gough",
|
||||||
|
"avatar": "michael-gough.png",
|
||||||
|
"email": "michael.gough@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "React developer",
|
||||||
|
"country": "United Kingdom",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"name": "Jese Leos",
|
||||||
|
"avatar": "jese-leos.png",
|
||||||
|
"email": "jese.leos@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Marketing",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"name": "Bonnie Green",
|
||||||
|
"avatar": "bonnie-green.png",
|
||||||
|
"email": "bonnie.green@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "UI/UX Engineer",
|
||||||
|
"country": "Australia",
|
||||||
|
"status": "Offline"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"name": "Thomas Lean",
|
||||||
|
"avatar": "thomas-lean.png",
|
||||||
|
"email": "thomas.lean@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Vue developer",
|
||||||
|
"country": "Germany",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"name": "Helene Engels",
|
||||||
|
"avatar": "helene-engels.png",
|
||||||
|
"email": "helene.engels@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Product owner",
|
||||||
|
"country": "Canada",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"name": "Lana Byrd",
|
||||||
|
"avatar": "lana-byrd.png",
|
||||||
|
"email": "lana.byrd@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Designer",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"name": "Leslie Livingston",
|
||||||
|
"avatar": "leslie-livingston.png",
|
||||||
|
"email": "leslie.livingston@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Web developer",
|
||||||
|
"country": "France",
|
||||||
|
"status": "Offline"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"name": "Robert Brown",
|
||||||
|
"avatar": "robert-brown.png",
|
||||||
|
"email": "robert.brown@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Laravel developer",
|
||||||
|
"country": "Russia",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 11,
|
||||||
|
"name": "Neil Sims",
|
||||||
|
"avatar": "neil-sims.png",
|
||||||
|
"email": "neil.sims@flowbite.com",
|
||||||
|
"position": "Front-end developer",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 12,
|
||||||
|
"name": "Roberta Casas",
|
||||||
|
"avatar": "roberta-casas.png",
|
||||||
|
"email": "roberta.casas@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Designer",
|
||||||
|
"country": "Spain",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 13,
|
||||||
|
"name": "Michael Gough",
|
||||||
|
"avatar": "michael-gough.png",
|
||||||
|
"email": "michael.gough@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "React developer",
|
||||||
|
"country": "United Kingdom",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 14,
|
||||||
|
"name": "Jese Leos",
|
||||||
|
"avatar": "jese-leos.png",
|
||||||
|
"email": "jese.leos@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Marketing",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 15,
|
||||||
|
"name": "Bonnie Green",
|
||||||
|
"avatar": "bonnie-green.png",
|
||||||
|
"email": "bonnie.green@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "UI/UX Engineer",
|
||||||
|
"country": "Australia",
|
||||||
|
"status": "Offline"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 16,
|
||||||
|
"name": "Thomas Lean",
|
||||||
|
"avatar": "thomas-lean.png",
|
||||||
|
"email": "thomas.lean@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Vue developer",
|
||||||
|
"country": "Germany",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 17,
|
||||||
|
"name": "Helene Engels",
|
||||||
|
"avatar": "helene-engels.png",
|
||||||
|
"email": "helene.engels@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Product owner",
|
||||||
|
"country": "Canada",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18,
|
||||||
|
"name": "Lana Byrd",
|
||||||
|
"avatar": "lana-byrd.png",
|
||||||
|
"email": "lana.byrd@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Designer",
|
||||||
|
"country": "United States",
|
||||||
|
"status": "Active"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 19,
|
||||||
|
"name": "Leslie Livingston",
|
||||||
|
"avatar": "leslie-livingston.png",
|
||||||
|
"email": "leslie.livingston@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Web developer",
|
||||||
|
"country": "France",
|
||||||
|
"status": "Offline"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 20,
|
||||||
|
"name": "Robert Brown",
|
||||||
|
"avatar": "robert-brown.png",
|
||||||
|
"email": "robert.brown@flowbite.com",
|
||||||
|
"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
|
||||||
|
"position": "Laravel developer",
|
||||||
|
"country": "Russia",
|
||||||
|
"status": "Active"
|
||||||
|
}
|
||||||
|
]
|
||||||
7806
package-lock.json
generated
Normal file
7806
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
47
package.json
Normal file
47
package.json
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "frontend",
|
||||||
|
"version": "0.0.3",
|
||||||
|
"private": "true",
|
||||||
|
"description": "Это первый выпуск тестовой разработки на продакшене",
|
||||||
|
"keywords": [
|
||||||
|
"tailwind",
|
||||||
|
"dashboard ui",
|
||||||
|
"html",
|
||||||
|
"astro",
|
||||||
|
"typrscript"
|
||||||
|
],
|
||||||
|
"homepage": "https://fipi.pro",
|
||||||
|
"bugs": "https://#",
|
||||||
|
"repository": "https://#",
|
||||||
|
"license": "????",
|
||||||
|
"author": "@iTKeyS",
|
||||||
|
"contributors": [
|
||||||
|
"admin <https://#>",
|
||||||
|
"admin <https://#>",
|
||||||
|
"admin <https://#>"
|
||||||
|
],
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"astro": "astro",
|
||||||
|
"build": "astro build",
|
||||||
|
"dev": "astro dev",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"start": "astro dev"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/check": "^0.4.1",
|
||||||
|
"@astrojs/sitemap": "^3.0.5",
|
||||||
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
|
"@astrojs/vue": "^4.0.8",
|
||||||
|
"@faker-js/faker": "^8.4.0",
|
||||||
|
"apexcharts": "^3.45.2",
|
||||||
|
"astro": "^4.3.1",
|
||||||
|
"axios": "^1.6.7",
|
||||||
|
"flowbite": "^2.2.1",
|
||||||
|
"shiki": "^1.0.0-beta.5",
|
||||||
|
"tailwind-scrollbar": "^3.0.5",
|
||||||
|
"tailwindcss": "^3.4.1",
|
||||||
|
"typescript": "^5.3.3",
|
||||||
|
"vue": "^3.4.21"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
public/favicon.svg
Normal file
9
public/favicon.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||||
|
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||||
|
<style>
|
||||||
|
path { fill: #000; }
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
path { fill: #FFF; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 749 B |
128
src/app/FooterSidebar.astro
Normal file
128
src/app/FooterSidebar.astro
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
import CopyrightNotice from '../widgets/CopyrightNotice.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer
|
||||||
|
class="p-4 my-6 mx-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 xl:p-8 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<ul class="flex flex-wrap items-center mb-6 space-y-1 md:mb-0">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Terms and conditions</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Privacy Policy</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Licensing</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Cookie Policy</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-sm font-normal text-gray-500 hover:underline dark:text-gray-400"
|
||||||
|
>Contact</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="flex space-x-6 sm:justify-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<CopyrightNotice />
|
||||||
40
src/app/FooterStacked.astro
Normal file
40
src/app/FooterStacked.astro
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
import CopyrightNotice from '../widgets/CopyrightNotice.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<footer
|
||||||
|
class="md:flex md:items-center md:justify-between px-4 2xl:px-0 py-6 md:py-10"
|
||||||
|
>
|
||||||
|
<CopyrightNotice />
|
||||||
|
|
||||||
|
<ul class="flex flex-wrap items-center justify-center">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Terms</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Licensing</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="mr-4 text-sm font-normal text-gray-500 hover:underline md:mr-6 dark:text-gray-400"
|
||||||
|
>Cookie Policy</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-sm font-normal text-gray-500 hover:underline dark:text-gray-400"
|
||||||
|
>Contact</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
67
src/app/LayoutCommon.astro
Normal file
67
src/app/LayoutCommon.astro
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
---
|
||||||
|
import pkg from '../../package.json' assert { type: 'json' };
|
||||||
|
import { url } from '../lib/data.ts';
|
||||||
|
|
||||||
|
import { SITE_TITLE } from './constants.js';
|
||||||
|
|
||||||
|
const { class: clazz } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{SITE_TITLE} — v{pkg.version}</title>
|
||||||
|
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<meta name="description" content={pkg.description} />
|
||||||
|
<meta name="" content={pkg.description} />
|
||||||
|
<link rel="icon" type="image/svg+xml" href={url('favicon.svg')} />
|
||||||
|
<link
|
||||||
|
rel="sitemap"
|
||||||
|
type="application/xml"
|
||||||
|
href={url('sitemap-index.xml')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<meta
|
||||||
|
name="author"
|
||||||
|
content="Julian Cataldo, Zoltán Szőgyényi, Robert Tanislav"
|
||||||
|
/>
|
||||||
|
<meta name="copyright" content="MIT" />
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
if (
|
||||||
|
localStorage.getItem('color-theme') === 'dark' ||
|
||||||
|
(!('color-theme' in localStorage) &&
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||||
|
) {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
class:list={[
|
||||||
|
//
|
||||||
|
clazz,
|
||||||
|
'bg-gray-50 dark:bg-gray-800',
|
||||||
|
'scrollbar scrollbar-w-3 scrollbar-thumb-rounded-[0.25rem]',
|
||||||
|
'scrollbar-track-slate-200 scrollbar-thumb-gray-400',
|
||||||
|
'dark:scrollbar-track-gray-900 dark:scrollbar-thumb-gray-700',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'flowbite';
|
||||||
|
import 'flowbite'
|
||||||
|
import 'flowbite/dist/datepicker.js'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
@import url('https://fonts.cdnfonts.com/css/inter');
|
||||||
|
</style>
|
||||||
23
src/app/LayoutSidebar.astro
Normal file
23
src/app/LayoutSidebar.astro
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
---
|
||||||
|
import FooterSidebar from './FooterSidebar.astro';
|
||||||
|
import LayoutCommon from './LayoutCommon.astro';
|
||||||
|
import NavBarSidebar from './NavBarSidebar.astro';
|
||||||
|
import SideBar from './SideBar.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutCommon>
|
||||||
|
<NavBarSidebar />
|
||||||
|
|
||||||
|
<SideBar />
|
||||||
|
|
||||||
|
<div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div
|
||||||
|
id="main-content"
|
||||||
|
class="relative w-full h-full overflow-y-auto bg-gray-50 lg:ml-64 dark:bg-gray-900 min-h-screen"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<FooterSidebar />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LayoutCommon>
|
||||||
22
src/app/LayoutStacked.astro
Normal file
22
src/app/LayoutStacked.astro
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
import FooterStacked from './FooterStacked.astro';
|
||||||
|
import LayoutCommon from './LayoutCommon.astro';
|
||||||
|
import NavBarStacked from './NavBarStacked.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutCommon>
|
||||||
|
<NavBarStacked />
|
||||||
|
|
||||||
|
<div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div
|
||||||
|
id="main-content"
|
||||||
|
class="relative w-full max-w-screen-2xl mx-auto h-full overflow-y-auto bg-gray-50 dark:bg-gray-900 min-h-screen"
|
||||||
|
>
|
||||||
|
<div class="px-4 pt-6 2xl:px-0">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<FooterStacked />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LayoutCommon>
|
||||||
650
src/app/NavBarSidebar.astro
Normal file
650
src/app/NavBarSidebar.astro
Normal file
@@ -0,0 +1,650 @@
|
|||||||
|
---
|
||||||
|
/* eslint max-lines: 'off' */
|
||||||
|
|
||||||
|
import { asset } from '../lib/data.ts'
|
||||||
|
|
||||||
|
import ColorModeSwitcher from '../widgets/ColorModeSwitcher.astro'
|
||||||
|
import GitHubButton from '../widgets/GitHubButton.astro'
|
||||||
|
import SearchInput from '../widgets/SearchInput.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav
|
||||||
|
class="fixed z-30 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="px-3 py-3 lg:px-5 lg:pl-3">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center justify-start">
|
||||||
|
<button
|
||||||
|
id="toggleSidebarMobile"
|
||||||
|
aria-expanded="true"
|
||||||
|
aria-controls="sidebar"
|
||||||
|
class="p-2 text-gray-600 rounded cursor-pointer lg:hidden hover:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 dark:focus:bg-gray-700 focus:ring-2 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
id="toggleSidebarMobileHamburger"
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
id="toggleSidebarMobileClose"
|
||||||
|
class="hidden w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<a href="/" class="flex ml-2 md:mr-24">
|
||||||
|
<img
|
||||||
|
src={asset('images/logo.svg')}
|
||||||
|
class="h-8 mr-3"
|
||||||
|
alt="FlowBite Logo"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white"
|
||||||
|
>Flowbite</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<SearchInput />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<GitHubButton repository="themesberg/flowbite-astro-admin-dashboard" />
|
||||||
|
|
||||||
|
<!-- Search mobile -->
|
||||||
|
<button
|
||||||
|
id="toggleSidebarMobileSearch"
|
||||||
|
type="button"
|
||||||
|
class="p-2 text-gray-500 rounded-lg lg:hidden hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Search</span>
|
||||||
|
<!-- Search icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<div
|
||||||
|
id="dropdownNavbar"
|
||||||
|
class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="py-2 text-sm text-gray-700 dark:text-gray-400"
|
||||||
|
aria-labelledby="dropdownNavbarButton"
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>Dashboard</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>Settings</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>Earnings</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="py-2">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>Sign out</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notifications -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-dropdown-toggle="notification-dropdown"
|
||||||
|
class="p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Bell icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<div
|
||||||
|
class="z-20 z-50 hidden max-w-sm my-4 overflow-hidden text-base list-none bg-white divide-y divide-gray-100 rounded shadow-lg dark:divide-gray-600 dark:bg-gray-700"
|
||||||
|
id="notification-dropdown"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="block px-4 py-2 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Notifications
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="rounded-full w-11 h-11"
|
||||||
|
src={asset('images/users/bonnie-green.png')}
|
||||||
|
alt="Jese image"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 border border-white rounded-full bg-primary-700 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
|
||||||
|
></path><path
|
||||||
|
d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pl-3">
|
||||||
|
<div
|
||||||
|
class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
New message from <span
|
||||||
|
class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>Bonnie Green</span
|
||||||
|
>: "Hey, what's up? All set for the presentation?"
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-xs font-medium text-primary-700 dark:text-primary-400"
|
||||||
|
>
|
||||||
|
a few moments ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="rounded-full w-11 h-11"
|
||||||
|
src={asset('images/users/jese-leos.png')}
|
||||||
|
alt="Jese image"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-gray-900 border border-white rounded-full dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pl-3">
|
||||||
|
<div
|
||||||
|
class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<span class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>Jese leos</span
|
||||||
|
> and <span class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>5 others</span
|
||||||
|
> started following you.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-xs font-medium text-primary-700 dark:text-primary-400"
|
||||||
|
>
|
||||||
|
10 minutes ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="rounded-full w-11 h-11"
|
||||||
|
src={asset('images/users/joseph-mcfall.png')}
|
||||||
|
alt="Joseph image"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-red-600 border border-white rounded-full dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pl-3">
|
||||||
|
<div
|
||||||
|
class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<span class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>Joseph Mcfall</span
|
||||||
|
> and <span class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>141 others</span
|
||||||
|
> love your story. See it and view more stories.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-xs font-medium text-primary-700 dark:text-primary-400"
|
||||||
|
>
|
||||||
|
44 minutes ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="rounded-full w-11 h-11"
|
||||||
|
src={asset('images/users/leslie-livingston.png')}
|
||||||
|
alt="Leslie image"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-green-400 border border-white rounded-full dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pl-3">
|
||||||
|
<div
|
||||||
|
class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<span class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>Leslie Livingston</span
|
||||||
|
> mentioned you in a comment: <span
|
||||||
|
class="font-medium text-primary-700 dark:text-primary-500"
|
||||||
|
>@bonnie.green</span
|
||||||
|
> what do you say?
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-xs font-medium text-primary-700 dark:text-primary-400"
|
||||||
|
>
|
||||||
|
1 hour ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<img
|
||||||
|
class="rounded-full w-11 h-11"
|
||||||
|
src={asset('images/users/robert-brown.png')}
|
||||||
|
alt="Robert image"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute flex items-center justify-center w-5 h-5 ml-6 -mt-5 bg-purple-500 border border-white rounded-full dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="w-full pl-3">
|
||||||
|
<div
|
||||||
|
class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
<span class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>Robert Brown</span
|
||||||
|
> posted a new video: Glassmorphism - learn how to implement the
|
||||||
|
new design trend.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="text-xs font-medium text-primary-700 dark:text-primary-400"
|
||||||
|
>
|
||||||
|
3 hours ago
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block py-2 text-base font-normal text-center text-gray-900 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700 dark:text-white dark:hover:underline"
|
||||||
|
>
|
||||||
|
<div class="inline-flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
View all
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- Apps -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-dropdown-toggle="apps-dropdown"
|
||||||
|
class="hidden p-2 text-gray-500 rounded-lg sm:flex hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<div
|
||||||
|
class="z-20 z-50 hidden max-w-sm my-4 overflow-hidden text-base list-none bg-white divide-y divide-gray-100 rounded shadow-lg dark:bg-gray-700 dark:divide-gray-600"
|
||||||
|
id="apps-dropdown"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="block px-4 py-2 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Apps
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-3 gap-4 p-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Sales
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Users
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Inbox
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Profile
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Settings
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Products
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
|
||||||
|
></path><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Pricing
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Billing
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-900 dark:text-white">
|
||||||
|
Logout
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ColorModeSwitcher />
|
||||||
|
|
||||||
|
<!-- Profile -->
|
||||||
|
<div class="flex items-center ml-3">
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
|
||||||
|
id="user-menu-button-2"
|
||||||
|
aria-expanded="false"
|
||||||
|
data-dropdown-toggle="dropdown-2"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Open user menu</span>
|
||||||
|
<img
|
||||||
|
class="w-8 h-8 rounded-full"
|
||||||
|
src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
|
||||||
|
alt="user photo"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<div
|
||||||
|
class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600"
|
||||||
|
id="dropdown-2"
|
||||||
|
>
|
||||||
|
<div class="px-4 py-3" role="none">
|
||||||
|
<p class="text-sm text-gray-900 dark:text-white" role="none">
|
||||||
|
Neil Sims
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="text-sm font-medium text-gray-900 truncate dark:text-gray-300"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
neil.sims@flowbite.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul class="py-1" role="none">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem">Dashboard</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem">Settings</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem">Earnings</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem">Sign out</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
168
src/app/NavBarStacked.astro
Normal file
168
src/app/NavBarStacked.astro
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav
|
||||||
|
class="fixed z-50 w-full bg-white border-b border-gray-200 sm:py-2 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="container py-3 mx-auto">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center justify-start">
|
||||||
|
<a href={url()} class="flex mr-4">
|
||||||
|
<img
|
||||||
|
src={asset('images/logo.svg')}
|
||||||
|
class="h-8 mr-3"
|
||||||
|
alt="Flowbite Logo"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
|
||||||
|
>Flowbite</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<div class="hidden sm:flex sm:ml-6">
|
||||||
|
<ul class="flex space-x-8">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url()}
|
||||||
|
class="text-sm font-medium text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-primary-500"
|
||||||
|
aria-current="page">Home</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-sm font-medium text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-primary-500"
|
||||||
|
aria-current="page">Team</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-sm font-medium text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-primary-500"
|
||||||
|
aria-current="page">Pricing</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-sm font-medium text-gray-700 hover:text-primary-700 dark:text-gray-400 dark:hover:text-primary-500"
|
||||||
|
aria-current="page">Contact</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Login/Register
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
data-collapse-toggle="mobile-menu"
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center justify-center p-2 ml-3 text-gray-400 rounded-lg sm:hidden hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-300 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
aria-controls="mobile-menu-2"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<!-- Open mobile menu icon -->
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
<!-- Close mobile menu icon -->
|
||||||
|
<svg
|
||||||
|
class="hidden w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mobile menu -->
|
||||||
|
<div class="hidden sm:hidden" id="mobile-menu">
|
||||||
|
<ul class="pt-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block py-2 pl-3 pr-4 text-base font-normal text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white"
|
||||||
|
>Dashboard</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 text-base font-normal text-gray-600 border-b border-gray-100 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900 dark:border-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>Team</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 text-base font-normal text-gray-600 border-b border-gray-100 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900 dark:border-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>Projects</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-3 py-2 text-base font-normal text-gray-600 border-b border-gray-100 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900 dark:border-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>Calendar
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="block">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center w-full px-3 py-2 text-base font-normal text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900 dark:border-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Login/Register
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
791
src/app/SideBar.astro
Normal file
791
src/app/SideBar.astro
Normal file
@@ -0,0 +1,791 @@
|
|||||||
|
---
|
||||||
|
/* eslint max-lines: 'off' */
|
||||||
|
|
||||||
|
import { url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- TODO: Dynamic dropdowns -->
|
||||||
|
<aside
|
||||||
|
id="sidebar"
|
||||||
|
class="fixed top-0 left-0 z-20 flex flex-col flex-shrink-0 hidden w-64 h-full pt-16 font-normal duration-75 lg:flex transition-width"
|
||||||
|
aria-label="Sidebar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="relative flex flex-col flex-1 min-h-0 pt-0 bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class:list={[
|
||||||
|
'flex flex-col flex-1 pt-5 pb-28 overflow-y-auto',
|
||||||
|
'scrollbar scrollbar-w-2 scrollbar-thumb-rounded-[0.1667rem]',
|
||||||
|
'scrollbar-thumb-slate-200 scrollbar-track-gray-400',
|
||||||
|
'dark:scrollbar-thumb-slate-900 dark:scrollbar-track-gray-800',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex-1 px-3 space-y-1 bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
|
||||||
|
>
|
||||||
|
<ul class="pb-2 space-y-2">
|
||||||
|
<li>
|
||||||
|
<form action="#" method="GET" class="lg:hidden">
|
||||||
|
<label for="mobile-search" class="sr-only">Search</label>
|
||||||
|
<div class="relative">
|
||||||
|
<div
|
||||||
|
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 text-gray-500"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="mobile-search"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-200 dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url()}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
class="w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Главная</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('dashboard')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path
|
||||||
|
d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg
|
||||||
|
>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Доски</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
aria-controls="dropdown-layouts"
|
||||||
|
data-collapse-toggle="dropdown-layouts"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="flex-1 ml-3 text-left whitespace-nowrap"
|
||||||
|
sidebar-toggle-item>Макеты</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
sidebar-toggle-item
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<ul id="dropdown-layouts" class="hidden py-2 space-y-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('layouts/stacked')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Сложенный</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('layouts/sidebar')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Боковая панель</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
aria-controls="dropdown-crud"
|
||||||
|
data-collapse-toggle="dropdown-crud"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M.99 5.24A2.25 2.25 0 013.25 3h13.5A2.25 2.25 0 0119 5.25l.01 9.5A2.25 2.25 0 0116.76 17H3.26A2.267 2.267 0 011 14.74l-.01-9.5zm8.26 9.52v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75v.615c0 .414.336.75.75.75h5.373a.75.75 0 00.627-.74zm1.5 0a.75.75 0 00.627.74h5.373a.75.75 0 00.75-.75v-.615a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75v.625zm6.75-3.63v-.625a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75v.625c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75zm-8.25 0v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75v.625c0 .414.336.75.75.75H8.5a.75.75 0 00.75-.75zM17.5 7.5v-.625a.75.75 0 00-.75-.75H11.5a.75.75 0 00-.75.75V7.5c0 .414.336.75.75.75h5.25a.75.75 0 00.75-.75zm-8.25 0v-.625a.75.75 0 00-.75-.75H3.25a.75.75 0 00-.75.75V7.5c0 .414.336.75.75.75H8.5a.75.75 0 00.75-.75z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="flex-1 ml-3 text-left whitespace-nowrap"
|
||||||
|
sidebar-toggle-item>CRUD</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
sidebar-toggle-item
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<ul id="dropdown-crud" class="hidden space-y-2 py-2">
|
||||||
|
<!-- if not (eq .Params.group crud) }}hidden {{ end }} -->
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "products" }} -->
|
||||||
|
<!-- bg-gray-100 dark:bg-gray-700 -->
|
||||||
|
<a
|
||||||
|
href={url('crud/products')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Products</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "users" }} -->
|
||||||
|
<!-- bg-gray-100 dark:bg-gray-700 -->
|
||||||
|
<a
|
||||||
|
href={url('crud/users')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Users</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "users" }} -->
|
||||||
|
<!-- bg-gray-100 dark:bg-gray-700 -->
|
||||||
|
<a
|
||||||
|
href={url('crud/todos')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Todos</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "settings" }} -->
|
||||||
|
<a
|
||||||
|
href={url('settings')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Настройки</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
aria-controls="dropdown-pages"
|
||||||
|
data-collapse-toggle="dropdown-pages"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm2 10a1 1 0 10-2 0v3a1 1 0 102 0v-3zm2-3a1 1 0 011 1v5a1 1 0 11-2 0v-5a1 1 0 011-1zm4-1a1 1 0 10-2 0v7a1 1 0 102 0V8z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="flex-1 ml-3 text-left whitespace-nowrap"
|
||||||
|
sidebar-toggle-item>Страницы</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
sidebar-toggle-item
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<ul id="dropdown-pages" class="hidden py-2 space-y-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('pages/pricing')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Pricing</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('pages/maintenance')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Maintenance</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('pages/404')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>404 not found</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('pages/500')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>500 server error</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
aria-controls="dropdown-auth"
|
||||||
|
data-collapse-toggle="dropdown-auth"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="flex-1 ml-3 text-left whitespace-nowrap"
|
||||||
|
sidebar-toggle-item>Authentication</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
sidebar-toggle-item
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<ul id="dropdown-auth" class="hidden py-2 space-y-2">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('authentication/sign-in')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Sign in</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('authentication/sign-up')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Sign up</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('authentication/forgot-password')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Forgot password</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('authentication/reset-password')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Reset password</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={url('authentication/profile-lock')}
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Profile lock</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
aria-controls="dropdown-playground"
|
||||||
|
data-collapse-toggle="dropdown-playground"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M6.672 1.911a1 1 0 10-1.932.518l.259.966a1 1 0 001.932-.518l-.26-.966zM2.429 4.74a1 1 0 10-.517 1.932l.966.259a1 1 0 00.517-1.932l-.966-.26zm8.814-.569a1 1 0 00-1.415-1.414l-.707.707a1 1 0 101.415 1.415l.707-.708zm-7.071 7.072l.707-.707A1 1 0 003.465 9.12l-.708.707a1 1 0 001.415 1.415zm3.2-5.171a1 1 0 00-1.3 1.3l4 10a1 1 0 001.823.075l1.38-2.759 3.018 3.02a1 1 0 001.414-1.415l-3.019-3.02 2.76-1.379a1 1 0 00-.076-1.822l-10-4z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="flex-1 ml-3 text-left whitespace-nowrap"
|
||||||
|
sidebar-toggle-item>Playground</span
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
sidebar-toggle-item
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<!-- {{ if not (eq .Params.group "playground") }}hidden {{ end }} -->
|
||||||
|
<ul id="dropdown-playground" class="hidden space-y-2 py-2">
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "stacked" }} -->
|
||||||
|
<!-- bg-gray-100 dark:bg-gray-700 -->
|
||||||
|
<a
|
||||||
|
href={url('playground/stacked')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Stacked</a
|
||||||
|
>
|
||||||
|
<!-- <a
|
||||||
|
href={url('playground/kitchen-sink')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Kitchen Sink</a
|
||||||
|
> -->
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<!-- {{ if eq $page_slug "sidebar" }} -->
|
||||||
|
<!-- bg-gray-100 dark:bg-gray-700 -->
|
||||||
|
<a
|
||||||
|
href={url('playground/sidebar')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>Sidebar</a
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={url('playground/data')}
|
||||||
|
class="text-base text-gray-900 rounded-lg flex items-center p-2 group hover:bg-gray-100 transition duration-75 pl-11 dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>API data</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="pt-2 space-y-2">
|
||||||
|
<a
|
||||||
|
href={'#'}
|
||||||
|
target="_blank"
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 496 512"
|
||||||
|
><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
|
||||||
|
<path
|
||||||
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>GitHub Repository</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
target="_blank"
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Flowbite Docs</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
target="_blank"
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Components</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
target="_blank"
|
||||||
|
class="flex items-center p-2 text-base text-gray-900 transition duration-75 rounded-lg hover:bg-gray-100 group dark:text-gray-200 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.525a3.997 3.997 0 00.078-2.183l1.562-1.562C15.802 8.249 16 9.1 16 10zm-5.165 3.913l1.58 1.58A5.98 5.98 0 0110 16a5.976 5.976 0 01-2.516-.552l1.562-1.562a4.006 4.006 0 001.789.027zm-4.677-2.796a4.002 4.002 0 01-.041-2.08l-.08.08-1.53-1.533A5.98 5.98 0 004 10c0 .954.223 1.856.619 2.657l1.54-1.54zm1.088-6.45A5.974 5.974 0 0110 4c.954 0 1.856.223 2.657.619l-1.54 1.54a4.002 4.002 0 00-2.346.033L7.246 4.668zM12 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span class="ml-3" sidebar-toggle-item>Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="absolute bottom-0 left-0 justify-center hidden w-full p-4 space-x-4 bg-white lg:flex dark:bg-gray-800"
|
||||||
|
sidebar-bottom-menu
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="/settings/"
|
||||||
|
data-tooltip-target="tooltip-settings"
|
||||||
|
class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
id="tooltip-settings"
|
||||||
|
role="tooltip"
|
||||||
|
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
|
||||||
|
>
|
||||||
|
Settings page
|
||||||
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-dropdown-toggle="language-dropdown"
|
||||||
|
class="inline-flex justify-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5 rounded-full mt-0.5"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
viewBox="0 0 3900 3900"
|
||||||
|
><path fill="#b22234" d="M0 0h7410v3900H0z"></path><path
|
||||||
|
d="M0 450h7410m0 600H0m0 600h7410m0 600H0m0 600h7410m0 600H0"
|
||||||
|
stroke="#fff"
|
||||||
|
stroke-width="300"></path><path fill="#3c3b6e" d="M0 0h2964v2100H0z"
|
||||||
|
></path><g fill="#fff"
|
||||||
|
><g id="d"
|
||||||
|
><g id="c"
|
||||||
|
><g id="e"
|
||||||
|
><g id="b"
|
||||||
|
><path
|
||||||
|
id="a"
|
||||||
|
d="M247 90l70.534 217.082-184.66-134.164h228.253L176.466 307.082z"
|
||||||
|
></path><use xlink:href="#a" y="420"></use><use
|
||||||
|
xlink:href="#a"
|
||||||
|
y="840"></use><use xlink:href="#a" y="1260"></use></g
|
||||||
|
><use xlink:href="#a" y="1680"></use></g
|
||||||
|
><use xlink:href="#b" x="247" y="210"></use></g
|
||||||
|
><use xlink:href="#c" x="494"></use></g
|
||||||
|
><use xlink:href="#d" x="988"></use><use xlink:href="#c" x="1976"
|
||||||
|
></use><use xlink:href="#e" x="2470"></use></g
|
||||||
|
></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<!-- Dropdown -->
|
||||||
|
<div
|
||||||
|
class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700"
|
||||||
|
id="language-dropdown"
|
||||||
|
>
|
||||||
|
<ul class="py-1" role="none">
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<div class="inline-flex items-center">
|
||||||
|
<svg
|
||||||
|
class="h-3.5 w-3.5 rounded-full mr-2"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="flag-icon-css-us"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<g fill-rule="evenodd">
|
||||||
|
<g stroke-width="1pt">
|
||||||
|
<path
|
||||||
|
fill="#bd3d44"
|
||||||
|
d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
|
||||||
|
transform="scale(3.9385)"></path>
|
||||||
|
<path
|
||||||
|
fill="#fff"
|
||||||
|
d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z"
|
||||||
|
transform="scale(3.9385)"></path>
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
fill="#192f5d"
|
||||||
|
d="M0 0h98.8v70H0z"
|
||||||
|
transform="scale(3.9385)"></path>
|
||||||
|
<path
|
||||||
|
fill="#fff"
|
||||||
|
d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z"
|
||||||
|
transform="scale(3.9385)"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
English (US)
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<div class="inline-flex items-center">
|
||||||
|
<svg
|
||||||
|
class="h-3.5 w-3.5 rounded-full mr-2"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="flag-icon-css-de"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<path fill="#ffce00" d="M0 341.3h512V512H0z"></path>
|
||||||
|
<path d="M0 0h512v170.7H0z"></path>
|
||||||
|
<path fill="#d00" d="M0 170.7h512v170.6H0z"></path>
|
||||||
|
</svg>
|
||||||
|
Deutsch
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<div class="inline-flex items-center">
|
||||||
|
<svg
|
||||||
|
class="h-3.5 w-3.5 rounded-full mr-2"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="flag-icon-css-it"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<g fill-rule="evenodd" stroke-width="1pt">
|
||||||
|
<path fill="#fff" d="M0 0h512v512H0z"></path>
|
||||||
|
<path fill="#009246" d="M0 0h170.7v512H0z"></path>
|
||||||
|
<path fill="#ce2b37" d="M341.3 0H512v512H341.3z"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Italiano
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<div class="inline-flex items-center">
|
||||||
|
<svg
|
||||||
|
class="h-3.5 w-3.5 rounded-full mr-2"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
id="flag-icon-css-cn"
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z"
|
||||||
|
></path>
|
||||||
|
</defs>
|
||||||
|
<path fill="#de2910" d="M0 0h512v512H0z"></path>
|
||||||
|
<use
|
||||||
|
width="30"
|
||||||
|
height="20"
|
||||||
|
transform="matrix(76.8 0 0 76.8 128 128)"
|
||||||
|
xlink:href="#a"></use>
|
||||||
|
<use
|
||||||
|
width="30"
|
||||||
|
height="20"
|
||||||
|
transform="rotate(-121 142.6 -47) scale(25.5827)"
|
||||||
|
xlink:href="#a"></use>
|
||||||
|
<use
|
||||||
|
width="30"
|
||||||
|
height="20"
|
||||||
|
transform="rotate(-98.1 198 -82) scale(25.6)"
|
||||||
|
xlink:href="#a"></use>
|
||||||
|
<use
|
||||||
|
width="30"
|
||||||
|
height="20"
|
||||||
|
transform="rotate(-74 272.4 -114) scale(25.6137)"
|
||||||
|
xlink:href="#a"></use>
|
||||||
|
<use
|
||||||
|
width="30"
|
||||||
|
height="20"
|
||||||
|
transform="matrix(16 -19.968 19.968 16 256 230.4)"
|
||||||
|
xlink:href="#a"></use>
|
||||||
|
</svg>
|
||||||
|
中文 (繁體)
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 z-10 hidden bg-gray-900/50 dark:bg-gray-900/90"
|
||||||
|
id="sidebarBackdrop"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const sidebar = document.getElementById('sidebar');
|
||||||
|
|
||||||
|
if (sidebar) {
|
||||||
|
const toggleSidebarMobile = (
|
||||||
|
sidebar: HTMLElement,
|
||||||
|
sidebarBackdrop: HTMLElement,
|
||||||
|
toggleSidebarMobileHamburger: HTMLElement,
|
||||||
|
toggleSidebarMobileClose: HTMLElement,
|
||||||
|
) => {
|
||||||
|
sidebar.classList.toggle('hidden');
|
||||||
|
sidebarBackdrop.classList.toggle('hidden');
|
||||||
|
toggleSidebarMobileHamburger.classList.toggle('hidden');
|
||||||
|
toggleSidebarMobileClose.classList.toggle('hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSidebarMobileEl = document.getElementById(
|
||||||
|
'toggleSidebarMobile',
|
||||||
|
);
|
||||||
|
const sidebarBackdrop = document.getElementById('sidebarBackdrop')!;
|
||||||
|
const toggleSidebarMobileHamburger = document.getElementById(
|
||||||
|
'toggleSidebarMobileHamburger',
|
||||||
|
)!;
|
||||||
|
const toggleSidebarMobileClose = document.getElementById(
|
||||||
|
'toggleSidebarMobileClose',
|
||||||
|
)!;
|
||||||
|
const toggleSidebarMobileSearch = document.getElementById(
|
||||||
|
'toggleSidebarMobileSearch',
|
||||||
|
)!;
|
||||||
|
|
||||||
|
toggleSidebarMobileSearch?.addEventListener('click', () => {
|
||||||
|
toggleSidebarMobile(
|
||||||
|
sidebar,
|
||||||
|
sidebarBackdrop,
|
||||||
|
toggleSidebarMobileHamburger,
|
||||||
|
toggleSidebarMobileClose,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
toggleSidebarMobileEl?.addEventListener('click', () => {
|
||||||
|
toggleSidebarMobile(
|
||||||
|
sidebar,
|
||||||
|
sidebarBackdrop,
|
||||||
|
toggleSidebarMobileHamburger,
|
||||||
|
toggleSidebarMobileClose,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
sidebarBackdrop?.addEventListener('click', () => {
|
||||||
|
toggleSidebarMobile(
|
||||||
|
sidebar,
|
||||||
|
sidebarBackdrop,
|
||||||
|
toggleSidebarMobileHamburger,
|
||||||
|
toggleSidebarMobileClose,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
55
src/app/constants.ts
Normal file
55
src/app/constants.ts
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
export const API_URL = `${import.meta.env.SITE}${import.meta.env.BASE_URL}api/`;
|
||||||
|
//export const API_URL = `https://fipi.pro/api/`;
|
||||||
|
//export const API_URL = `https://fipi.pro/api/todos?format=json`;
|
||||||
|
|
||||||
|
export const REMOTE_ASSETS_BASE_URL = `http://127.0.0.1:8000`;
|
||||||
|
//export const REMOTE_ASSETS_BASE_URL = `https://fipi.pro`;
|
||||||
|
|
||||||
|
export const SITE_TITLE = 'We Property Admin Dashboard';
|
||||||
|
|
||||||
|
/* Useful flag for sourcing from `./data` entirely, disabling randomize layer */
|
||||||
|
export const RANDOMIZE = Boolean(import.meta.env.RANDOMIZE) || true;
|
||||||
|
|
||||||
|
// NOTE: Unmapped
|
||||||
|
// export const SIDEBAR = [
|
||||||
|
// {
|
||||||
|
// title: 'Getting started',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Introduction' },
|
||||||
|
// { title: 'Quickstart' },
|
||||||
|
// { title: 'Build tools' },
|
||||||
|
// { title: 'License' },
|
||||||
|
// { title: 'Changelog' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Customize',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Configuration' },
|
||||||
|
// { title: 'Theming' },
|
||||||
|
// { title: 'Color' },
|
||||||
|
// { title: 'Icons' },
|
||||||
|
// { title: 'Optimization' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: 'Components',
|
||||||
|
// pages: [
|
||||||
|
// { title: 'Alerts' },
|
||||||
|
// { title: 'Badge' },
|
||||||
|
// { title: 'Breadcrumb' },
|
||||||
|
// { title: 'Buttons' },
|
||||||
|
// { title: 'Button group' },
|
||||||
|
// { title: 'Card' },
|
||||||
|
// { title: 'Dropdowns' },
|
||||||
|
// { title: 'Forms' },
|
||||||
|
// { title: 'Typography' },
|
||||||
|
// { title: 'Modal' },
|
||||||
|
// { title: 'Navbar' },
|
||||||
|
// { title: 'Pagination' },
|
||||||
|
// { title: 'Progress' },
|
||||||
|
// { title: 'Tables' },
|
||||||
|
// { title: 'Tooltips' },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
// ];
|
||||||
8
src/assets/astro-icon.svg
Normal file
8
src/assets/astro-icon.svg
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
<svg width="63" height="79" viewBox="0 0 63 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M19.4924 65.9282C15.6165 62.432 14.4851 55.0859 16.0999 49.7638C18.8998 53.1193 22.7793 54.1822 26.7977 54.7822C33.0013 55.7081 39.0937 55.3618 44.8565 52.5637C45.5158 52.2434 46.125 51.8174 46.8454 51.386C47.3861 52.9341 47.5268 54.497 47.338 56.0877C46.8787 59.9617 44.9251 62.9542 41.8177 65.2227C40.5752 66.13 39.2604 66.9411 37.9771 67.7967C34.0346 70.4262 32.9679 73.5095 34.4494 77.9946C34.4846 78.1038 34.5161 78.2131 34.5957 78.4797C32.5828 77.5909 31.1124 76.2965 29.9921 74.5946C28.8088 72.7984 28.2458 70.8114 28.2162 68.6615C28.2014 67.6152 28.2014 66.5597 28.0588 65.5282C27.7107 63.0135 26.5144 61.8876 24.2608 61.8227C21.9479 61.7561 20.1183 63.1672 19.6331 65.3893C19.5961 65.5597 19.5424 65.7282 19.4887 65.9263L19.4924 65.9282Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
<path
|
||||||
|
d="M0 51.3932C0 51.3932 10.5979 46.2433 21.2254 46.2433L29.2382 21.5069C29.5381 20.3106 30.4141 19.4977 31.4029 19.4977C32.3918 19.4977 33.2677 20.3106 33.5677 21.5069L41.5804 46.2433C54.1672 46.2433 62.8058 51.3932 62.8058 51.3932C62.8058 51.3932 44.8044 2.47586 44.7692 2.37772C44.2526 0.931458 43.3804 0 42.2045 0H20.6032C19.4273 0 18.5903 0.931458 18.0384 2.37772C17.9995 2.47401 0 51.3932 0 51.3932Z"
|
||||||
|
fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
9
src/assets/astro-logo-dark.svg
Normal file
9
src/assets/astro-logo-dark.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg width="300" height="79" viewBox="0 0 300 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20.2866 66.8455C16.7323 63.6045 15.6947 56.7948 17.1755 51.8613C19.7432 54.9718 23.3009 55.9571 26.986 56.5133C32.6749 57.3716 38.262 57.0506 43.5468 54.4568C44.1513 54.1598 44.71 53.765 45.3706 53.3651C45.8665 54.8001 45.9956 56.2489 45.8224 57.7235C45.4012 61.3146 43.6096 64.0886 40.76 66.1914C39.6206 67.0326 38.4148 67.7844 37.238 68.5775C33.6225 71.0151 32.6444 73.8732 34.0029 78.0308C34.0352 78.132 34.0641 78.2333 34.1371 78.4805C32.2912 77.6565 30.9428 76.4567 29.9154 74.8791C28.8302 73.214 28.314 71.3721 28.2868 69.3791C28.2732 68.4093 28.2732 67.4308 28.1425 66.4747C27.8232 64.1435 26.7262 63.0999 24.6595 63.0398C22.5384 62.978 20.8606 64.286 20.4157 66.3459C20.3817 66.5038 20.3325 66.6601 20.2832 66.8437L20.2866 66.8455Z" fill="#17191E"/>
|
||||||
|
<path d="M0 51.0393C0 51.0393 10.5249 45.9249 21.0793 45.9249L29.0369 21.3588C29.3348 20.1708 30.2047 19.3634 31.1867 19.3634C32.1688 19.3634 33.0386 20.1708 33.3366 21.3588L41.2942 45.9249C53.7942 45.9249 62.3734 51.0393 62.3734 51.0393C62.3734 51.0393 44.496 2.45882 44.461 2.36135C43.9479 0.925045 43.0817 0 41.9139 0H20.4613C19.2935 0 18.4623 0.925045 17.9142 2.36135C17.8756 2.45698 0 51.0393 0 51.0393Z" fill="#17191E"/>
|
||||||
|
<path d="M110.967 43.9652C110.967 48.27 105.599 50.841 98.1667 50.841C93.3296 50.841 91.6189 49.6452 91.6189 47.134C91.6189 44.5033 93.7425 43.2477 98.5796 43.2477C102.945 43.2477 106.661 43.3075 110.967 43.8456V43.9652ZM111.026 38.6439C108.372 38.046 104.361 37.6873 99.5825 37.6873C85.6611 37.6873 79.1133 40.9757 79.1133 48.6288C79.1133 56.5808 83.5964 59.63 93.9785 59.63C102.768 59.63 108.726 57.4178 110.908 51.977H111.262C111.203 53.2923 111.144 54.6077 111.144 55.6241C111.144 58.4342 111.616 58.6734 113.917 58.6734H124.771C124.181 56.9993 123.827 52.2759 123.827 48.2102C123.827 43.8456 124.004 40.5572 124.004 36.1328C124.004 27.1045 118.577 21.3648 101.588 21.3648C94.2734 21.3648 86.133 22.6203 79.9391 24.4738C80.529 26.9252 81.3549 31.8877 81.7678 35.1163C87.1358 32.6052 94.7454 31.529 100.644 31.529C108.785 31.529 111.026 33.3824 111.026 37.1492V38.6439Z" fill="#17191E"/>
|
||||||
|
<path d="M140.808 46.4763C139.333 46.6557 137.328 46.6557 135.263 46.6557C133.08 46.6557 131.075 46.5959 129.718 46.4165C129.718 46.8949 129.659 47.433 129.659 47.9113C129.659 55.385 134.555 59.7496 151.78 59.7496C168.002 59.7496 173.252 55.4448 173.252 47.8515C173.252 40.6768 169.772 37.1492 154.375 36.3719C142.401 35.8338 141.339 34.5184 141.339 33.0237C141.339 31.2898 142.873 30.393 150.895 30.393C159.213 30.393 161.454 31.529 161.454 33.9205V34.4586C162.634 34.3989 164.758 34.3391 166.94 34.3391C169.005 34.3391 171.246 34.3989 172.544 34.5184C172.544 33.9803 172.603 33.502 172.603 33.0835C172.603 24.2944 165.288 21.4245 151.131 21.4245C135.204 21.4245 129.836 25.3109 129.836 32.9041C129.836 39.7201 134.142 43.9652 149.42 44.6229C160.687 44.9816 161.926 46.2372 161.926 47.9711C161.926 49.8245 160.097 50.6616 152.193 50.6616C143.109 50.6616 140.808 49.406 140.808 46.8351V46.4763Z" fill="#17191E"/>
|
||||||
|
<path d="M192.722 14.9673C188.416 18.9732 180.688 22.9791 176.382 24.0553C176.441 26.2675 176.441 30.3332 176.441 32.5454L180.393 32.6052C180.334 36.8502 180.275 41.9921 180.275 45.4001C180.275 53.3521 184.463 59.3311 197.5 59.3311C202.986 59.3311 206.643 58.7332 211.185 57.7765C210.713 54.8469 210.183 50.3626 210.006 46.9546C207.292 47.8515 203.871 48.3298 200.095 48.3298C194.845 48.3298 192.722 46.8949 192.722 42.7694C192.722 39.182 192.722 35.8338 192.781 32.7248C199.506 32.7845 206.23 32.9041 210.183 33.0237C210.124 29.9147 210.242 25.4304 210.419 22.441C204.697 22.5605 198.267 22.6203 192.958 22.6203C193.017 19.9896 193.076 17.4784 193.135 14.9673H192.722Z" fill="#17191E"/>
|
||||||
|
<path d="M227.954 30.7517C228.013 27.6426 228.072 25.0119 228.131 22.441H216.274C216.451 27.5829 216.451 32.8443 216.451 40.5572C216.451 48.27 216.392 53.5913 216.274 58.6734H229.841C229.605 55.086 229.546 49.0473 229.546 43.9054C229.546 35.774 232.85 33.4422 240.341 33.4422C243.822 33.4422 246.299 33.8608 248.482 34.638C248.541 31.5888 249.131 25.6696 249.485 23.0389C247.243 22.3812 244.765 21.9627 241.757 21.9627C235.327 21.9029 230.608 24.5336 228.425 30.8115L227.954 30.7517Z" fill="#17191E"/>
|
||||||
|
<path d="M287.018 40.318C287.018 46.8351 282.299 49.8843 274.866 49.8843C267.492 49.8843 262.773 47.0144 262.773 40.318C262.773 33.6216 267.551 31.1104 274.866 31.1104C282.24 31.1104 287.018 33.801 287.018 40.318ZM299.346 40.0191C299.346 27.0448 289.2 21.2452 274.866 21.2452C260.473 21.2452 250.68 27.0448 250.68 40.0191C250.68 52.9336 259.824 59.8692 274.807 59.8692C289.908 59.8692 299.346 52.9336 299.346 40.0191Z" fill="#17191E"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
9
src/assets/astro-logo-light.svg
Normal file
9
src/assets/astro-logo-light.svg
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<svg width="301" height="79" viewBox="0 0 301 79" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20.7866 66.8455C17.2323 63.6045 16.1947 56.7948 17.6755 51.8613C20.2432 54.9718 23.8009 55.9571 27.486 56.5133C33.1749 57.3716 38.762 57.0506 44.0468 54.4568C44.6513 54.1598 45.21 53.765 45.8706 53.3651C46.3665 54.8001 46.4956 56.2489 46.3224 57.7235C45.9012 61.3146 44.1096 64.0886 41.26 66.1914C40.1206 67.0326 38.9148 67.7844 37.738 68.5775C34.1225 71.0151 33.1444 73.8732 34.5029 78.0308C34.5352 78.132 34.5641 78.2333 34.6371 78.4805C32.7912 77.6565 31.4428 76.4567 30.4154 74.8791C29.3302 73.214 28.814 71.3721 28.7868 69.3791C28.7732 68.4093 28.7732 67.4308 28.6425 66.4747C28.3232 64.1435 27.2262 63.0999 25.1595 63.0398C23.0384 62.978 21.3606 64.286 20.9157 66.3459C20.8817 66.5038 20.8325 66.6601 20.7832 66.8437L20.7866 66.8455Z" fill="white"/>
|
||||||
|
<path d="M0.5 51.0393C0.5 51.0393 11.0249 45.9249 21.5793 45.9249L29.5369 21.3588C29.8348 20.1708 30.7047 19.3634 31.6867 19.3634C32.6688 19.3634 33.5386 20.1708 33.8366 21.3588L41.7942 45.9249C54.2942 45.9249 62.8734 51.0393 62.8734 51.0393C62.8734 51.0393 44.996 2.45882 44.961 2.36135C44.4479 0.925045 43.5817 0 42.4139 0H20.9613C19.7935 0 18.9623 0.925045 18.4142 2.36135C18.3756 2.45698 0.5 51.0393 0.5 51.0393Z" fill="white"/>
|
||||||
|
<path d="M111.467 43.9652C111.467 48.27 106.099 50.841 98.6667 50.841C93.8296 50.841 92.1189 49.6452 92.1189 47.134C92.1189 44.5033 94.2425 43.2477 99.0796 43.2477C103.445 43.2477 107.161 43.3075 111.467 43.8456V43.9652ZM111.526 38.6439C108.872 38.046 104.861 37.6873 100.082 37.6873C86.1611 37.6873 79.6133 40.9757 79.6133 48.6288C79.6133 56.5808 84.0964 59.63 94.4785 59.63C103.268 59.63 109.226 57.4178 111.408 51.977H111.762C111.703 53.2923 111.644 54.6077 111.644 55.6241C111.644 58.4342 112.116 58.6734 114.417 58.6734H125.271C124.681 56.9993 124.327 52.2759 124.327 48.2102C124.327 43.8456 124.504 40.5572 124.504 36.1328C124.504 27.1045 119.077 21.3648 102.088 21.3648C94.7734 21.3648 86.633 22.6203 80.4391 24.4738C81.029 26.9252 81.8549 31.8877 82.2678 35.1163C87.6358 32.6052 95.2454 31.529 101.144 31.529C109.285 31.529 111.526 33.3824 111.526 37.1492V38.6439Z" fill="white"/>
|
||||||
|
<path d="M141.308 46.4763C139.833 46.6557 137.828 46.6557 135.763 46.6557C133.58 46.6557 131.575 46.5959 130.218 46.4165C130.218 46.8949 130.159 47.433 130.159 47.9113C130.159 55.385 135.055 59.7496 152.28 59.7496C168.502 59.7496 173.752 55.4448 173.752 47.8515C173.752 40.6768 170.272 37.1492 154.875 36.3719C142.901 35.8338 141.839 34.5184 141.839 33.0237C141.839 31.2898 143.373 30.393 151.395 30.393C159.713 30.393 161.954 31.529 161.954 33.9205V34.4586C163.134 34.3989 165.258 34.3391 167.44 34.3391C169.505 34.3391 171.746 34.3989 173.044 34.5184C173.044 33.9803 173.103 33.502 173.103 33.0835C173.103 24.2944 165.788 21.4245 151.631 21.4245C135.704 21.4245 130.336 25.3109 130.336 32.9041C130.336 39.7201 134.642 43.9652 149.92 44.6229C161.187 44.9816 162.426 46.2372 162.426 47.9711C162.426 49.8245 160.597 50.6616 152.693 50.6616C143.609 50.6616 141.308 49.406 141.308 46.8351V46.4763Z" fill="white"/>
|
||||||
|
<path d="M193.222 14.9673C188.916 18.9732 181.188 22.9791 176.882 24.0553C176.941 26.2675 176.941 30.3332 176.941 32.5454L180.893 32.6052C180.834 36.8502 180.775 41.9921 180.775 45.4001C180.775 53.3521 184.963 59.3311 198 59.3311C203.486 59.3311 207.143 58.7332 211.685 57.7765C211.213 54.8469 210.683 50.3626 210.506 46.9546C207.792 47.8515 204.371 48.3298 200.595 48.3298C195.345 48.3298 193.222 46.8949 193.222 42.7694C193.222 39.182 193.222 35.8338 193.281 32.7248C200.006 32.7845 206.73 32.9041 210.683 33.0237C210.624 29.9147 210.742 25.4304 210.919 22.441C205.197 22.5605 198.767 22.6203 193.458 22.6203C193.517 19.9896 193.576 17.4784 193.635 14.9673H193.222Z" fill="white"/>
|
||||||
|
<path d="M228.454 30.7517C228.513 27.6426 228.572 25.0119 228.631 22.441H216.774C216.951 27.5829 216.951 32.8443 216.951 40.5572C216.951 48.27 216.892 53.5913 216.774 58.6734H230.341C230.105 55.086 230.046 49.0473 230.046 43.9054C230.046 35.774 233.35 33.4422 240.841 33.4422C244.322 33.4422 246.799 33.8608 248.982 34.638C249.041 31.5888 249.631 25.6696 249.985 23.0389C247.743 22.3812 245.265 21.9627 242.257 21.9627C235.827 21.9029 231.108 24.5336 228.925 30.8115L228.454 30.7517Z" fill="white"/>
|
||||||
|
<path d="M287.518 40.318C287.518 46.8351 282.799 49.8843 275.366 49.8843C267.992 49.8843 263.273 47.0144 263.273 40.318C263.273 33.6216 268.051 31.1104 275.366 31.1104C282.74 31.1104 287.518 33.801 287.518 40.318ZM299.846 40.0191C299.846 27.0448 289.7 21.2452 275.366 21.2452C260.973 21.2452 251.18 27.0448 251.18 40.0191C251.18 52.9336 260.324 59.8692 275.307 59.8692C290.408 59.8692 299.846 52.9336 299.846 40.0191Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
77
src/assets/flowbite-logo.svg
Normal file
77
src/assets/flowbite-logo.svg
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z"
|
||||||
|
fill="url(#paint0_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z"
|
||||||
|
fill="url(#paint1_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z"
|
||||||
|
fill="url(#paint2_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z"
|
||||||
|
fill="url(#paint3_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z"
|
||||||
|
fill="url(#paint4_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z"
|
||||||
|
fill="url(#paint5_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z"
|
||||||
|
fill="url(#paint6_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z"
|
||||||
|
fill="url(#paint7_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z"
|
||||||
|
fill="url(#paint8_linear_2484_3243)" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
50
src/assets/images/logo.svg
Normal file
50
src/assets/images/logo.svg
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z" fill="url(#paint0_linear_2484_3243)" />
|
||||||
|
<path d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z" fill="url(#paint1_linear_2484_3243)" />
|
||||||
|
<path d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z" fill="url(#paint2_linear_2484_3243)" />
|
||||||
|
<path d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z" fill="url(#paint3_linear_2484_3243)" />
|
||||||
|
<path d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z" fill="url(#paint4_linear_2484_3243)" />
|
||||||
|
<path d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z" fill="url(#paint5_linear_2484_3243)" />
|
||||||
|
<path d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z" fill="url(#paint6_linear_2484_3243)" />
|
||||||
|
<path d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z" fill="url(#paint7_linear_2484_3243)" />
|
||||||
|
<path d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z" fill="url(#paint8_linear_2484_3243)" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
77
src/assets/logo.svg
Normal file
77
src/assets/logo.svg
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z"
|
||||||
|
fill="url(#paint0_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z"
|
||||||
|
fill="url(#paint1_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z"
|
||||||
|
fill="url(#paint2_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z"
|
||||||
|
fill="url(#paint3_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z"
|
||||||
|
fill="url(#paint4_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z"
|
||||||
|
fill="url(#paint5_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z"
|
||||||
|
fill="url(#paint6_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z"
|
||||||
|
fill="url(#paint7_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z"
|
||||||
|
fill="url(#paint8_linear_2484_3243)" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
46
src/entities/entities.ts
Normal file
46
src/entities/entities.ts
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import type { playgroundActions } from '../pages/playground/_actions.js'
|
||||||
|
import type { endpointsToOperations } from '../shared/api/[...entity].js'
|
||||||
|
|
||||||
|
export type EndpointsToOperations = typeof endpointsToOperations;
|
||||||
|
export type Endpoint = keyof EndpointsToOperations;
|
||||||
|
|
||||||
|
export type Products = Product[];
|
||||||
|
export interface Product {
|
||||||
|
name: string;
|
||||||
|
category: string;
|
||||||
|
technology: string;
|
||||||
|
id: number;
|
||||||
|
description: string;
|
||||||
|
price: string;
|
||||||
|
discount: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Users = User[];
|
||||||
|
export interface User {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
email: string;
|
||||||
|
biography: string;
|
||||||
|
position: string;
|
||||||
|
country: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Todos = Todo[];
|
||||||
|
export interface Todo {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
body: string;
|
||||||
|
tagList: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
startTd: string;
|
||||||
|
endTd: string;
|
||||||
|
favorited: string;
|
||||||
|
author: string;
|
||||||
|
status: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PlaygroundAction = (typeof playgroundActions)[number];
|
||||||
10
src/env.d.ts
vendored
Normal file
10
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/// <reference types="astro/client" />
|
||||||
|
|
||||||
|
// https://docs.astro.build/en/guides/environment-variables/#intellisense-for-typescript
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly SITE: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
50
src/images/logo.svg
Normal file
50
src/images/logo.svg
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z" fill="url(#paint0_linear_2484_3243)" />
|
||||||
|
<path d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z" fill="url(#paint1_linear_2484_3243)" />
|
||||||
|
<path d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z" fill="url(#paint2_linear_2484_3243)" />
|
||||||
|
<path d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z" fill="url(#paint3_linear_2484_3243)" />
|
||||||
|
<path d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z" fill="url(#paint4_linear_2484_3243)" />
|
||||||
|
<path d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z" fill="url(#paint5_linear_2484_3243)" />
|
||||||
|
<path d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z" fill="url(#paint6_linear_2484_3243)" />
|
||||||
|
<path d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z" fill="url(#paint7_linear_2484_3243)" />
|
||||||
|
<path d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z" fill="url(#paint8_linear_2484_3243)" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 6.0 KiB |
54
src/lib/data.ts
Normal file
54
src/lib/data.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// NOTE: This is where you could wire up your own data providers:
|
||||||
|
// GraphQL, Databases, REST APIs, CDNs, proxies, S3, Matrix, IPFS, you name it…
|
||||||
|
|
||||||
|
import { API_URL, REMOTE_ASSETS_BASE_URL } from '../app/constants.js'
|
||||||
|
import type { Endpoint, EndpointsToOperations } from '../entities/entities.js'
|
||||||
|
|
||||||
|
export async function fetchData<Selected extends Endpoint>(endpoint: Selected) {
|
||||||
|
const apiEndpoint = `${API_URL}${endpoint}`;
|
||||||
|
|
||||||
|
console.info(`Fetching ${apiEndpoint}…`);
|
||||||
|
return fetch(apiEndpoint)
|
||||||
|
.then(
|
||||||
|
(r) =>
|
||||||
|
r.json() as unknown as Promise<
|
||||||
|
ReturnType<EndpointsToOperations[Selected]>
|
||||||
|
>,
|
||||||
|
)
|
||||||
|
.catch((e) => {
|
||||||
|
console.error(e);
|
||||||
|
throw Error('Invalid API data!');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// NOTE: These helpers are useful for unifying paths, app-wide
|
||||||
|
export function url(path = '') {
|
||||||
|
return `${import.meta.env.SITE}${import.meta.env.BASE_URL}${path}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Remove old local assets from git history (to make cloning snappier).
|
||||||
|
export function asset(path: string) {
|
||||||
|
// NOTE: Fetching remote assets from the Hugo admin dashboard Vercel dist.
|
||||||
|
return `${REMOTE_ASSETS_BASE_URL}/${path}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function post(url: string, data: any): Promise<Response> {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error posting data:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
8
src/pages/404.astro
Normal file
8
src/pages/404.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../app/LayoutStacked.astro'
|
||||||
|
import ErrorNotFound from '../widgets/ErrorNotFound.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<ErrorNotFound />
|
||||||
|
</LayoutStacked>
|
||||||
91
src/pages/LandingReadme.astro
Normal file
91
src/pages/LandingReadme.astro
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
---
|
||||||
|
import Code from 'astro/components/Code.astro'
|
||||||
|
|
||||||
|
import Confettis from '../widgets/ConfettiLauncher.astro'
|
||||||
|
|
||||||
|
import AstroLogo from '../assets/astro-icon.svg?raw'
|
||||||
|
import FlowbiteLogo from '../assets/flowbite-logo.svg?raw'
|
||||||
|
|
||||||
|
import * as readMe from '../../README.md'
|
||||||
|
import { SITE_TITLE } from '../app/constants.js'
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 text-slate-800 dark:text-slate-100 mb-20 p-4 lg:p-16 shadow-xl shadow-slate-200 dark:shadow-slate-900"
|
||||||
|
>
|
||||||
|
<header
|
||||||
|
class="p-8 flex justify-center items-center flex-wrap flex-col w-full mt-16"
|
||||||
|
>
|
||||||
|
<div class="flex justify-center w-full">
|
||||||
|
<div
|
||||||
|
set:html={AstroLogo}
|
||||||
|
class="svg-inline w-16 h-16 text-violet-700 dark:text-violet-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format dark:format-invert lg:format-lg mt-32">
|
||||||
|
<p
|
||||||
|
class="text-4xl lg:text-8xl dark:text-slate-200 text-slate-600 leading-tight"
|
||||||
|
>
|
||||||
|
Hello <a
|
||||||
|
rel="noopener nofollow"
|
||||||
|
href="https://astro.build"
|
||||||
|
class="font-bold text-transparent bg-clip-text bg-gradient-to-br from-pink-400 to-violet-800 dark:from-pink-300 dark:to-violet-700 no-underline"
|
||||||
|
>Astro</a
|
||||||
|
>…
|
||||||
|
<br />meet <a
|
||||||
|
rel="noopener nofollow"
|
||||||
|
href="https://flowbite.com"
|
||||||
|
class="font-bold text-blue-600 dark:text-blue-500 no-underline"
|
||||||
|
>Flowbite</a
|
||||||
|
>!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex justify-center w-full">
|
||||||
|
<Confettis>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-blue-800 hover:text-white border border-blue-700 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-100 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800"
|
||||||
|
>Click me!</button
|
||||||
|
>
|
||||||
|
</Confettis>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-center w-full my-16">
|
||||||
|
<div set:html={FlowbiteLogo} class="svg-inline w-16 h-16" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="flex justify-center w-full pb-24">
|
||||||
|
<div class="w-full format dark:format-invert">
|
||||||
|
<Code
|
||||||
|
lang={'powershell' /* Looks cool */}
|
||||||
|
code={`git clone \\
|
||||||
|
https://github.com/themesberg/flowbite-astro-admin-dashboard.git`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<article class="flex justify-center pt-32 pb-32">
|
||||||
|
<div class="w-full readme format dark:format-invert lg:format-lg">
|
||||||
|
<h1 class="text-center">
|
||||||
|
<!-- {readMe.getHeadings()[0].text} -->
|
||||||
|
{SITE_TITLE}
|
||||||
|
</h1>
|
||||||
|
<readMe.Content />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Override in Markdown H1 title */
|
||||||
|
.readme :global(h1:nth-of-type(2)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-inline :global(svg) {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
10
src/pages/authentication/forgot-password.astro
Normal file
10
src/pages/authentication/forgot-password.astro
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import FormForgotPassword from '../../widgets/FormForgotPassword.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div class="min-h-screen align-middle flex pb-[12vh]">
|
||||||
|
<FormForgotPassword />
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
10
src/pages/authentication/profile-lock.astro
Normal file
10
src/pages/authentication/profile-lock.astro
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import FormProfileLock from '../../widgets/FormProfileLock.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div class="min-h-screen align-middle flex pb-[12vh]">
|
||||||
|
<FormProfileLock />
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
10
src/pages/authentication/reset-password.astro
Normal file
10
src/pages/authentication/reset-password.astro
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import FormResetPassword from '../../widgets/FormResetPassword.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div class="min-h-screen align-middle flex pb-[12vh]">
|
||||||
|
<FormResetPassword />
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
11
src/pages/authentication/sign-in.astro
Normal file
11
src/pages/authentication/sign-in.astro
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
//import FormSignIn from '../../widgets/FormSignIn.astro'
|
||||||
|
import SignIn from '../../widgets/sign-in.vue'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div class="min-h-screen align-middle flex pb-[12vh]">
|
||||||
|
<SignIn client:load/>
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
10
src/pages/authentication/sign-up.astro
Normal file
10
src/pages/authentication/sign-up.astro
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import FormSignUp from '../../widgets/FormSignUp.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div class="min-h-screen align-middle flex pb-[12vh]">
|
||||||
|
<FormSignUp />
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
7
src/pages/crud/products.astro
Normal file
7
src/pages/crud/products.astro
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<!--CrudProducts /-->
|
||||||
|
</LayoutSidebar>
|
||||||
7
src/pages/crud/todos.astro
Normal file
7
src/pages/crud/todos.astro
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro'
|
||||||
|
import TodoList from '../../widgets/TodoList.vue'
|
||||||
|
---
|
||||||
|
<LayoutSidebar>
|
||||||
|
<TodoList client:load />
|
||||||
|
</LayoutSidebar>
|
||||||
7
src/pages/crud/users.astro
Normal file
7
src/pages/crud/users.astro
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<!--CrudUsers /-->
|
||||||
|
</LayoutSidebar>
|
||||||
8
src/pages/dashboard.astro
Normal file
8
src/pages/dashboard.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../app/LayoutSidebar.astro'
|
||||||
|
import DashBoard from '../widgets/DashBoard.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<DashBoard />
|
||||||
|
</LayoutSidebar>
|
||||||
91
src/pages/favicon.svg.ts
Normal file
91
src/pages/favicon.svg.ts
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import type { APIRoute } from 'astro';
|
||||||
|
|
||||||
|
export const get: APIRoute = function get(/* { params, request } */) {
|
||||||
|
/* IDEA: Can be dynamicized (alternative colors…) */
|
||||||
|
|
||||||
|
const icon = /* html */ `
|
||||||
|
<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M24.5194 13.4429C24.4453 13.9533 24.1087 14.6468 23.7226 15.2497C23.2354 16.0105 22.4622 16.5433 21.5774 16.7283L17.6797 17.5434C17.0533 17.6744 16.4852 18.0022 16.0587 18.479L13.503 21.3357C13.0227 21.8725 12.687 21.7445 12.687 21.0244C12.6812 21.0511 11.4186 24.3072 14.7646 26.2371C16.0502 26.9787 17.9009 26.7122 19.1865 25.9707L25.9983 22.0416C28.5458 20.5722 30.3445 18.0863 30.9424 15.2089C30.966 15.095 30.9843 14.9808 31.004 14.8667L24.5194 13.4429Z"
|
||||||
|
fill="url(#paint0_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M22.7528 9.51774C24.0384 10.2593 24.5637 11.3633 24.5637 12.8464C24.5637 13.0477 24.5479 13.2466 24.5194 13.4425L27.2641 14.6215L31.004 14.8663C31.4829 12.0948 30.5444 9.24202 28.862 6.97445C27.5959 5.268 25.9667 3.78714 24.0081 2.65738C22.417 1.73966 20.7636 1.13501 19.1025 0.803223L17.2361 3.22023L16.6465 5.99559L22.7528 9.51774Z"
|
||||||
|
fill="url(#paint1_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M0.783597 11.5518C0.782899 11.554 0.784832 11.5546 0.78556 11.5524C0.929583 11.1205 1.11018 10.6385 1.33564 10.1237C2.51334 7.4343 4.78286 5.64062 7.57492 4.72608C10.367 3.81156 13.4155 4.13212 15.9601 5.59988L16.6465 5.99578L19.1025 0.803412C11.291 -0.756765 3.30728 3.83253 0.793528 11.5217C0.792327 11.5254 0.787957 11.5382 0.783597 11.5518Z"
|
||||||
|
fill="url(#paint2_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M18.9199 25.9704C17.6343 26.712 16.0503 26.712 14.7647 25.9704C14.5902 25.8697 14.4257 25.7566 14.2701 25.634L12.0091 27.1885L10.0603 30.3376C12.2233 32.1377 15.0321 32.7164 17.839 32.3945C19.9513 32.1523 22.0495 31.4832 24.0082 30.3534C25.5992 29.4357 26.9501 28.3075 28.0682 27.0361L26.9063 24.2128L25.0262 22.4482L18.9199 25.9704Z"
|
||||||
|
fill="url(#paint3_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M14.2701 25.6341C13.2796 24.8539 12.6872 23.6572 12.6872 22.3754V22.2476V11.5724C12.6872 10.9687 12.865 10.8661 13.3884 11.168C12.5823 10.703 10.7203 9.10701 8.42118 10.4331C7.13557 11.1747 6.0769 12.8116 6.0769 14.2946V22.1529C6.0769 25.0917 7.59906 28.1573 9.79448 30.1133C9.88132 30.1906 9.97122 30.2636 10.0603 30.3377L14.2701 25.6341Z"
|
||||||
|
fill="url(#paint4_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M27.9105 5.8123C27.909 5.8106 27.9075 5.81197 27.909 5.81368C28.2114 6.15428 28.5389 6.5515 28.8725 7.00399C30.6149 9.36765 31.2659 12.3613 30.6627 15.2343C30.0594 18.1072 28.2573 20.5846 25.7126 22.0523L25.0262 22.4482L28.0683 27.0361C33.3265 21.0576 33.3401 11.8554 27.9316 5.83594C27.9291 5.83306 27.9201 5.82287 27.9105 5.8123Z"
|
||||||
|
fill="url(#paint5_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M6.34355 14.2944C6.34354 12.8113 7.13552 11.4408 8.42113 10.6993C8.59565 10.5986 8.77601 10.5129 8.96002 10.4395L8.74304 7.70603L7.21862 4.57861C4.57671 5.55005 2.4397 7.55766 1.31528 10.1471C0.469097 12.0957 9.792e-06 14.2458 0 16.5052C0 18.3407 0.302549 20.0735 0.845533 21.6767L3.87391 22.083L6.34355 21.3387V14.2944V14.2944Z"
|
||||||
|
fill="url(#paint6_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M8.96003 10.4395C10.1316 9.97264 11.4652 10.0584 12.5763 10.6993L12.6871 10.7632L21.5825 15.8941C22.2065 16.254 22.1498 16.6082 21.4445 16.7557L21.9577 16.6484C22.6329 16.5072 23.2498 16.1621 23.7216 15.6592C24.5327 14.7946 24.8305 13.7515 24.8305 12.8463C24.8304 11.3632 24.0385 9.99274 22.7529 9.2512L15.941 5.32209C13.3935 3.85267 10.3394 3.53934 7.5461 4.46083C7.4356 4.49727 7.32744 4.5386 7.21863 4.57861L8.96003 10.4395Z"
|
||||||
|
fill="url(#paint7_linear_2484_3243)" />
|
||||||
|
<path
|
||||||
|
d="M19.3222 32.1523C19.3245 32.1518 19.3241 32.1498 19.3218 32.1503C18.8753 32.2417 18.3673 32.3264 17.8083 32.3888C14.8881 32.7145 11.9676 31.781 9.77876 29.8225C7.58999 27.8641 6.3436 25.0662 6.3436 22.1307L6.34359 21.3389L0.845581 21.6769C3.39893 29.2156 11.369 33.8285 19.2912 32.1588C19.295 32.158 19.3083 32.1553 19.3222 32.1523Z"
|
||||||
|
fill="url(#paint8_linear_2484_3243)" />
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint0_linear_2484_3243" x1="20.0599" y1="24.2701" x2="23.2075" y2="13.307"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint1_linear_2484_3243" x1="27.3093" y1="10.9001" x2="19.0297" y2="2.64962"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint2_linear_2484_3243" x1="16.1645" y1="5.52115" x2="3.67432" y2="6.3104"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint3_linear_2484_3243" x1="15.3198" y1="29.1626" x2="26.5366" y2="26.1359"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint4_linear_2484_3243" x1="7.26881" y1="16.1827" x2="15.2325" y2="24.4347"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint5_linear_2484_3243" x1="25.4505" y1="22.1356" x2="31.007" y2="10.9345"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint6_linear_2484_3243" x1="5.36387" y1="9.63067" x2="2.39054" y2="20.8063"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1C64F2" />
|
||||||
|
<stop offset="1" stop-color="#0092FF" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint7_linear_2484_3243" x1="20.5431" y1="9.09912" x2="9.67768" y2="11.8044"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#1724C9" />
|
||||||
|
<stop offset="1" stop-color="#1C64F2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint8_linear_2484_3243" x1="6.40679" y1="21.8566" x2="13.3326" y2="32.2745"
|
||||||
|
gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#0092FF" />
|
||||||
|
<stop offset="1" stop-color="#45B2FF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
body: icon,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'image/svg+xml',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
8
src/pages/index.astro
Normal file
8
src/pages/index.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../app/LayoutSidebar.astro'
|
||||||
|
import LandingReadme from './LandingReadme.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<LandingReadme />
|
||||||
|
</LayoutSidebar>
|
||||||
8
src/pages/layouts/sidebar.astro
Normal file
8
src/pages/layouts/sidebar.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro'
|
||||||
|
import DashBoard from '../../widgets/DashBoard.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<DashBoard />
|
||||||
|
</LayoutSidebar>
|
||||||
8
src/pages/layouts/stacked.astro
Normal file
8
src/pages/layouts/stacked.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import DashBoard from '../../widgets/DashBoard.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<DashBoard />
|
||||||
|
</LayoutStacked>
|
||||||
8
src/pages/pages/500.astro
Normal file
8
src/pages/pages/500.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import ErrorServer from '../../widgets/ErrorServer.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<ErrorServer />
|
||||||
|
</LayoutStacked>
|
||||||
8
src/pages/pages/maintenance.astro
Normal file
8
src/pages/pages/maintenance.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import ErrorMaintenance from '../../widgets/ErrorMaintenance.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<ErrorMaintenance />
|
||||||
|
</LayoutStacked>
|
||||||
8
src/pages/pages/pricing.astro
Normal file
8
src/pages/pages/pricing.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro'
|
||||||
|
import PricingPlan from '../../widgets/PricingPlan.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<PricingPlan />
|
||||||
|
</LayoutStacked>
|
||||||
8
src/pages/playground/_actions.ts
Normal file
8
src/pages/playground/_actions.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import type { PlaygroundAction } from '../../entities/entities.js'
|
||||||
|
|
||||||
|
export const playgroundActions = ['refetchCrudData', 'hardReloadPage'] as const;
|
||||||
|
|
||||||
|
export const actions: { text: string; action: PlaygroundAction }[] = [
|
||||||
|
{ text: 'Soft re-fetch (API)', action: 'refetchCrudData' },
|
||||||
|
{ text: 'Hard reload (SSR)', action: 'hardReloadPage' },
|
||||||
|
];
|
||||||
50
src/pages/playground/data.astro
Normal file
50
src/pages/playground/data.astro
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
/* http://localhost:2121/playground/data/ */
|
||||||
|
|
||||||
|
import Code from 'astro/components/Code.astro';
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro';
|
||||||
|
import { getUsers, getProducts } from '../../shared/index.js';
|
||||||
|
|
||||||
|
const products = JSON.stringify(getProducts(), null, 2);
|
||||||
|
|
||||||
|
const users = JSON.stringify(getUsers(), null, 2);
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar class="bg-slate-800 text-slate-100">
|
||||||
|
<div class="playground p-16">
|
||||||
|
<h1
|
||||||
|
class="text-3xl ml-8 lg:text-4xl xl:text-6xl font-bold dark:text-slate-100"
|
||||||
|
>
|
||||||
|
🕹 Playground — API data
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div class="mt-24 mb-8">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
onclick="location.reload()">Refresh</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-16">
|
||||||
|
<a href="/api/products" target="_blank">
|
||||||
|
<h1 class="text-6xl font-bold mb-8 dark:text-slate-100">Products</h1>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<Code code={products} lang="json" />
|
||||||
|
</div>
|
||||||
|
<div class="mb-16">
|
||||||
|
<a href="/api/users" target="_blank">
|
||||||
|
<h1 class="text-6xl font-bold mb-8 dark:text-slate-100">Users</h1>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<Code code={users} lang="json" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LayoutSidebar>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
.playground .astro-code {
|
||||||
|
@apply rounded-3xl p-8;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
131
src/pages/playground/kitchen-sink.astro
Normal file
131
src/pages/playground/kitchen-sink.astro
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
---
|
||||||
|
/* http://localhost:2121/playground/kitchen-sink/ */
|
||||||
|
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro';
|
||||||
|
import CrudProducts from '../../widgets/CrudProducts.astro';
|
||||||
|
import FormSignIn from '../../widgets/FormSignIn.astro';
|
||||||
|
import FormSignUp from '../../widgets/FormSignUp.astro';
|
||||||
|
import FormForgotPassword from '../../widgets/FormForgotPassword.astro';
|
||||||
|
import FormResetPassword from '../../widgets/FormResetPassword.astro';
|
||||||
|
import FormProfileLock from '../../widgets/FormProfileLock.astro';
|
||||||
|
// import CrudUsers from '../../widgets/CrudUsers.astro';
|
||||||
|
import ErrorMaintenance from '../../widgets/ErrorMaintenance.astro';
|
||||||
|
import ErrorNotFound from '../../widgets/ErrorNotFound.astro';
|
||||||
|
import ErrorServer from '../../widgets/ErrorServer.astro';
|
||||||
|
import PricingPlan from '../../widgets/PricingPlan.astro';
|
||||||
|
|
||||||
|
import { actions } from './_actions.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar class="bg-slate-800 text-slate-100 mb-20 py-16 px-8">
|
||||||
|
<h1 class="text-3xl ml-8 lg:text-4xl xl:text-7xl font-bold">
|
||||||
|
🕹 Playground
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<dummy-spacer class="block mb-36"></dummy-spacer>
|
||||||
|
|
||||||
|
<nav
|
||||||
|
class:list={[
|
||||||
|
'flex align-middle justify-center z-50',
|
||||||
|
'top-2 p-4 bg-gray-800/30 w-full sticky border-slate-800',
|
||||||
|
'border-x-red-200 backdrop-blur-md text-white bg-gradient-to-r',
|
||||||
|
'from-slate-700/30 via-slate-700 to-slate-700/30',
|
||||||
|
'hover:from-slate-500/30 hover:to-slate-500/30',
|
||||||
|
'focus:ring-4 focus:outline-none focus:ring-blue-300',
|
||||||
|
'dark:focus:ring-blue-800 shadow-lg shadow-slate-800/50',
|
||||||
|
'dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg',
|
||||||
|
'text-sm px-5 py-2.5 text-center mr-2 mb-2',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
actions.map((button) => (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-action={button.action}
|
||||||
|
class:list={[
|
||||||
|
'mx-8',
|
||||||
|
button.action === 'hardReloadPage' && 'bg-gray-800',
|
||||||
|
|
||||||
|
'text-white bg-blue-700 hover:bg-blue-800',
|
||||||
|
'focus:outline-none focus:ring-4 focus:ring-blue-300',
|
||||||
|
'font-medium rounded-full text-sm px-5 py-2.5',
|
||||||
|
'text-center mr-2 my-2 dark:bg-blue-600',
|
||||||
|
'dark:hover:bg-blue-700 dark:focus:ring-blue-800',
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{button.text}
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-5xl font-bold m-8 mt-24">CRUD — Products</h2>
|
||||||
|
<!--CrudProducts class="p-4 lg:p-16" /-->
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- <section>
|
||||||
|
<h2 class="text-5xl font-bold m-8 mt-24">CRUD — Users</h2>
|
||||||
|
<CrudUsers class="p-4 lg:p-16" />
|
||||||
|
</section> -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-5xl font-bold m-8 mt-24">Forms — User</h2>
|
||||||
|
|
||||||
|
<div class="flex justify-between flex-wrap">
|
||||||
|
<FormSignIn class="p-4 lg:p-16" />
|
||||||
|
<FormResetPassword class="p-4 lg:p-16" />
|
||||||
|
<FormProfileLock class="p-4 lg:p-16" />
|
||||||
|
</div>
|
||||||
|
<div class="mt-12 flex justify-between flex-wrap">
|
||||||
|
<FormSignUp class="p-4 lg:p-16" />
|
||||||
|
<FormForgotPassword class="p-4 lg:p-16" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-5xl font-bold m-8 mt-24">Pricing plan</h2>
|
||||||
|
|
||||||
|
<div class="bg-slate-50 mb-8 lg:p-16">
|
||||||
|
<PricingPlan class="p-4 lg:p-16" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 class="text-5xl font-bold m-8 mt-24">Pages — Errors</h2>
|
||||||
|
<div class="flex flex-wrap justify-around gap-8">
|
||||||
|
<div class="bg-slate-50 mb-8 lg:p-16">
|
||||||
|
<ErrorMaintenance class="p-4" />
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 mb-8 lg:p-16">
|
||||||
|
<ErrorNotFound class="p-4" />
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 mb-8 lg:p-16">
|
||||||
|
<ErrorServer class="p-4" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</LayoutSidebar>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import type { CrudEntities } from '../../widgets/CrudEntities.client.js';
|
||||||
|
import type { PlaygroundAction } from '../../entities/entities.ts'
|
||||||
|
import type { CrudEntities } from '../../widgets/CrudEntities.client.js'
|
||||||
|
const playgroundActions: Record<PlaygroundAction, (...args: any) => void> = {
|
||||||
|
refetchCrudData: (crud: CrudEntities) => crud.update(),
|
||||||
|
hardReloadPage: () => location.reload(),
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-action]').forEach((b) =>
|
||||||
|
b.addEventListener('click', (e) =>
|
||||||
|
document.querySelectorAll('entities-crud').forEach((crud) => {
|
||||||
|
const name = (e.target as HTMLElement).dataset
|
||||||
|
.action as PlaygroundAction;
|
||||||
|
|
||||||
|
console.log('Action!', name, e.target);
|
||||||
|
|
||||||
|
playgroundActions[name](crud);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
</script>
|
||||||
236
src/pages/playground/sidebar.astro
Normal file
236
src/pages/playground/sidebar.astro
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../../app/LayoutSidebar.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:gap-4 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="mb-4 col-span-full xl:mb-2">
|
||||||
|
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||||||
|
<ol
|
||||||
|
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||||||
|
>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-500"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2.5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-primary-500"
|
||||||
|
>Pages</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||||||
|
aria-current="page">Playground</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<h1
|
||||||
|
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||||
|
>
|
||||||
|
Create something awesome here
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<!-- Right Content -->
|
||||||
|
<div class="col-span-full xl:col-auto">
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 px-4 mb-4 md:grid-cols-2 xl:grid-cols-4">
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LayoutSidebar>
|
||||||
236
src/pages/playground/stacked.astro
Normal file
236
src/pages/playground/stacked.astro
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
---
|
||||||
|
import LayoutStacked from '../../app/LayoutStacked.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutStacked>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 px-4 pt-6 xl:grid-cols-3 xl:px-0 xl:gap-4 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="mb-4 col-span-full xl:mb-2">
|
||||||
|
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||||||
|
<ol
|
||||||
|
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||||||
|
>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-500"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2.5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-primary-500"
|
||||||
|
>Pages</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||||||
|
aria-current="page">Playground</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<h1
|
||||||
|
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||||
|
>
|
||||||
|
Create something awesome here
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<!-- Right Content -->
|
||||||
|
<div class="col-span-full xl:col-auto">
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 mb-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-32 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-4 px-4 mb-4 md:grid-cols-2 xl:grid-cols-4 xl:px-0">
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="p-4 space-y-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card header</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="h-16 px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card body</h3>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="px-4 py-2 text-gray-400 border border-gray-200 border-dashed rounded dark:border-gray-600"
|
||||||
|
>
|
||||||
|
<h3>Card footer</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</LayoutStacked>
|
||||||
8
src/pages/settings.astro
Normal file
8
src/pages/settings.astro
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
import LayoutSidebar from '../app/LayoutSidebar.astro'
|
||||||
|
import UserSettings from '../widgets/UserSettings.astro'
|
||||||
|
---
|
||||||
|
|
||||||
|
<LayoutSidebar>
|
||||||
|
<UserSettings />
|
||||||
|
</LayoutSidebar>
|
||||||
3
src/shared/README.md
Normal file
3
src/shared/README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
Services operations can be called internally or via controllers located in:
|
||||||
|
|
||||||
|
[/src/pages/api/\[...entity\].ts](../pages/api/%5B...entity%5D.ts)
|
||||||
43
src/shared/api/[...entity].ts
Normal file
43
src/shared/api/[...entity].ts
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import type { APIRoute } from 'astro'
|
||||||
|
import * as operations from '../index.js'
|
||||||
|
|
||||||
|
/* Map REST API endpoints to internal operations
|
||||||
|
(GETs only for illustration purpose) */
|
||||||
|
export const endpointsToOperations = {
|
||||||
|
products: operations.getProducts,
|
||||||
|
users: operations.getUsers,
|
||||||
|
todos: operations.getTodos,
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseTypeParam(endpoint: string | undefined) {
|
||||||
|
if (!endpoint || !(endpoint in endpointsToOperations)) return undefined;
|
||||||
|
return endpoint as keyof typeof endpointsToOperations;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Controllers */
|
||||||
|
|
||||||
|
export const get: APIRoute = ({ params /* , request */ }) => {
|
||||||
|
console.log('Hit!', params.entity);
|
||||||
|
|
||||||
|
const operationName = parseTypeParam(params.entity);
|
||||||
|
|
||||||
|
if (!operationName) return new Response('404', { status: 404 });
|
||||||
|
|
||||||
|
const body = endpointsToOperations[operationName]();
|
||||||
|
|
||||||
|
return new Response(JSON.stringify(body), {
|
||||||
|
status: 200,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/* ... */
|
||||||
|
|
||||||
|
/* Astro's static build helper, can be removed for SSR mode */
|
||||||
|
export function getStaticPaths() {
|
||||||
|
return Object.keys(endpointsToOperations).map((endpoint) => ({
|
||||||
|
params: { entity: endpoint },
|
||||||
|
}));
|
||||||
|
}
|
||||||
5
src/shared/index.ts
Normal file
5
src/shared/index.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
/* — Operations — */
|
||||||
|
|
||||||
|
export * from './products.js'
|
||||||
|
export * from './users.js'
|
||||||
|
|
||||||
23
src/shared/products.ts
Normal file
23
src/shared/products.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
/* eslint-disable no-param-reassign */
|
||||||
|
import { faker } from '@faker-js/faker'
|
||||||
|
import { RANDOMIZE } from '../app/constants.js'
|
||||||
|
import type { Products } from '../entities/entities.js'
|
||||||
|
|
||||||
|
import productsStaticJSON from '../../data/products.json' assert { type: 'json' }
|
||||||
|
|
||||||
|
const productsStaticData: Products = productsStaticJSON;
|
||||||
|
|
||||||
|
export function getProducts(randomize = RANDOMIZE) {
|
||||||
|
console.log('getProducts');
|
||||||
|
|
||||||
|
const result = randomize
|
||||||
|
? productsStaticData.map((p) => {
|
||||||
|
p.price = faker.commerce.price();
|
||||||
|
p.technology = faker.commerce.productName();
|
||||||
|
p.description = faker.commerce.productDescription();
|
||||||
|
return p;
|
||||||
|
})
|
||||||
|
: productsStaticData;
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
24
src/shared/users.ts
Normal file
24
src/shared/users.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
/* eslint-disable no-param-reassign */
|
||||||
|
import { faker } from '@faker-js/faker'
|
||||||
|
import { RANDOMIZE } from '../app/constants.js'
|
||||||
|
import type { Users } from '../entities/entities.js'
|
||||||
|
|
||||||
|
import usersStaticJSON from '../../data/users.json' assert { type: 'json' }
|
||||||
|
|
||||||
|
const usersStaticData: Users = usersStaticJSON;
|
||||||
|
|
||||||
|
export function getUsers(randomize = RANDOMIZE) {
|
||||||
|
console.log('getUsers');
|
||||||
|
|
||||||
|
const result = randomize
|
||||||
|
? usersStaticData.map((p) => {
|
||||||
|
p.name = faker.name.fullName();
|
||||||
|
p.email = faker.internet.email();
|
||||||
|
p.position = faker.name.jobTitle();
|
||||||
|
p.country = faker.address.country();
|
||||||
|
return p;
|
||||||
|
})
|
||||||
|
: usersStaticData;
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
22
src/utils/http.ts
Normal file
22
src/utils/http.ts
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
// utils/http.ts
|
||||||
|
|
||||||
|
export async function post(url: string, data: any): Promise<Response> {
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error posting data:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
86
src/widgets/ColorModeSwitcher.astro
Normal file
86
src/widgets/ColorModeSwitcher.astro
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<button
|
||||||
|
id="theme-toggle"
|
||||||
|
data-tooltip-target="tooltip-toggle"
|
||||||
|
type="button"
|
||||||
|
class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
id="theme-toggle-dark-icon"
|
||||||
|
class="hidden w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
id="theme-toggle-light-icon"
|
||||||
|
class="hidden w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id="tooltip-toggle"
|
||||||
|
role="tooltip"
|
||||||
|
class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip"
|
||||||
|
>
|
||||||
|
Toggle dark mode
|
||||||
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||||
|
const themeToggleLightIcon = document.getElementById(
|
||||||
|
'theme-toggle-light-icon',
|
||||||
|
);
|
||||||
|
|
||||||
|
// Change the icons inside the button based on previous settings
|
||||||
|
if (
|
||||||
|
localStorage.getItem('color-theme') === 'dark' ||
|
||||||
|
(!('color-theme' in localStorage) &&
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||||||
|
) {
|
||||||
|
themeToggleLightIcon.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
themeToggleDarkIcon.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||||
|
|
||||||
|
let event = new Event('dark-mode');
|
||||||
|
|
||||||
|
themeToggleBtn.addEventListener('click', function () {
|
||||||
|
// toggle icons
|
||||||
|
themeToggleDarkIcon.classList.toggle('hidden');
|
||||||
|
themeToggleLightIcon.classList.toggle('hidden');
|
||||||
|
|
||||||
|
// if set via local storage previously
|
||||||
|
if (localStorage.getItem('color-theme')) {
|
||||||
|
if (localStorage.getItem('color-theme') === 'light') {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
localStorage.setItem('color-theme', 'dark');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
localStorage.setItem('color-theme', 'light');
|
||||||
|
}
|
||||||
|
|
||||||
|
// if NOT set via local storage previously
|
||||||
|
} else {
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
document.documentElement.classList.remove('dark');
|
||||||
|
localStorage.setItem('color-theme', 'light');
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.add('dark');
|
||||||
|
localStorage.setItem('color-theme', 'dark');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.dispatchEvent(event);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
41
src/widgets/ConfettiLauncher.astro
Normal file
41
src/widgets/ConfettiLauncher.astro
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<div data-trigger-confettis>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wrapper">
|
||||||
|
<canvas id="confettis"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script
|
||||||
|
is:inline
|
||||||
|
src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.18/dist/index.min.js"
|
||||||
|
></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.wrapper {
|
||||||
|
top: 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ts-ignore
|
||||||
|
const confettiElement = document.querySelector('#confettis');
|
||||||
|
const triggerConfettis = document.querySelector('[data-trigger-confettis]');
|
||||||
|
|
||||||
|
triggerConfettis.addEventListener('click', popIt);
|
||||||
|
|
||||||
|
function popIt() {
|
||||||
|
const confettiSettings = {
|
||||||
|
target: confettiElement,
|
||||||
|
start_from_edge: true,
|
||||||
|
};
|
||||||
|
const confetti = new ConfettiGenerator(confettiSettings);
|
||||||
|
confetti.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Pop 🎉!');
|
||||||
|
</script>
|
||||||
6
src/widgets/CopyrightNotice.astro
Normal file
6
src/widgets/CopyrightNotice.astro
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<p class="my-10 text-sm text-center text-gray-500">
|
||||||
|
© 2019 - {new Date().getFullYear()} —
|
||||||
|
<a href="https://flowbite.com/" class="hover:underline" target="_blank"
|
||||||
|
>Flowbite.com</a
|
||||||
|
>. All rights reserved.
|
||||||
|
</p>
|
||||||
61
src/widgets/CrudEntities.client.ts
Normal file
61
src/widgets/CrudEntities.client.ts
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
/* eslint-disable no-param-reassign */
|
||||||
|
|
||||||
|
import type { Endpoint } from '../entities/entities.js'
|
||||||
|
import { fetchData } from '../lib/data.js'
|
||||||
|
import { endpointsToOperations } from '../shared/api/[...entity].js'
|
||||||
|
|
||||||
|
export class CrudEntities extends HTMLElement {
|
||||||
|
#body = this.querySelector('tbody')!;
|
||||||
|
|
||||||
|
#rows = this.#body.querySelectorAll('tr')!;
|
||||||
|
|
||||||
|
#refreshButton = this.querySelector('[data-refresh]');
|
||||||
|
|
||||||
|
type: Endpoint | undefined;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
const type = this.getAttribute('type');
|
||||||
|
|
||||||
|
if (
|
||||||
|
Object.keys(endpointsToOperations).find((endpoint) => endpoint === type)
|
||||||
|
)
|
||||||
|
this.type = type as Endpoint;
|
||||||
|
else throw Error('Wrong CRUD type!');
|
||||||
|
|
||||||
|
this.#refreshButton?.addEventListener('click', () => {
|
||||||
|
this.update().catch(() => undefined);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch new content from API and update DOM text accordingly
|
||||||
|
*/
|
||||||
|
async update() {
|
||||||
|
if (!this.type) return;
|
||||||
|
|
||||||
|
const newData = await fetchData(this.type);
|
||||||
|
console.log('UP');
|
||||||
|
|
||||||
|
this.#rows.forEach((row, index) =>
|
||||||
|
row.querySelectorAll('data').forEach((binding) => {
|
||||||
|
const valKey = binding.value;
|
||||||
|
const rowData = newData[index];
|
||||||
|
if (!rowData) return;
|
||||||
|
if (!(valKey in rowData)) return;
|
||||||
|
|
||||||
|
binding.innerText = rowData[valKey as keyof typeof rowData].toString();
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log('New data received!', newData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const tagName = 'entities-crud';
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
[tagName]: CrudEntities;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
customElements.define(tagName, CrudEntities);
|
||||||
725
src/widgets/CrudProducts.astro
Normal file
725
src/widgets/CrudProducts.astro
Normal file
@@ -0,0 +1,725 @@
|
|||||||
|
---
|
||||||
|
/* eslint max-lines: 'off' */
|
||||||
|
|
||||||
|
import { fetchData } from '../lib/data.js';
|
||||||
|
import NavPagination from '../widgets/NavPagination.astro';
|
||||||
|
|
||||||
|
const products = await fetchData('products');
|
||||||
|
---
|
||||||
|
|
||||||
|
<entities-crud type="products">
|
||||||
|
<div
|
||||||
|
class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="w-full mb-1">
|
||||||
|
<div class="mb-4">
|
||||||
|
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||||||
|
<ol
|
||||||
|
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||||||
|
>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2.5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>E-commerce</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||||||
|
aria-current="page">Products</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<h1
|
||||||
|
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||||
|
>
|
||||||
|
All products
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="items-center justify-between block sm:flex">
|
||||||
|
<div class="flex items-center mb-4 sm:mb-0">
|
||||||
|
<form class="sm:pr-3" action="#" method="GET">
|
||||||
|
<label for="products-search" class="sr-only">Search</label>
|
||||||
|
<div class="relative w-48 mt-1 sm:w-64 xl:w-96">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="products-search"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Search for products"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center w-full sm:justify-end">
|
||||||
|
<div class="flex pl-2 space-x-1">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center ml-auto space-x-2 sm:space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-refresh
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
id="createProductButton"
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
type="button"
|
||||||
|
data-drawer-target="drawer-create-product-default"
|
||||||
|
data-drawer-show="drawer-create-product-default"
|
||||||
|
aria-controls="drawer-create-product-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Add product
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<div class="inline-block min-w-full align-middle">
|
||||||
|
<div class="overflow-hidden shadow">
|
||||||
|
<table
|
||||||
|
class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-600"
|
||||||
|
>
|
||||||
|
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="checkbox-all"
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for="checkbox-all" class="sr-only">checkbox</label>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
{
|
||||||
|
[
|
||||||
|
'Product Name',
|
||||||
|
'Technology',
|
||||||
|
'Description',
|
||||||
|
'ID',
|
||||||
|
'Price',
|
||||||
|
'Discount',
|
||||||
|
'Actions',
|
||||||
|
].map((th) => (
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
{th}
|
||||||
|
</th>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody
|
||||||
|
class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
products.map((product) => (
|
||||||
|
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||||
|
<td class="w-4 p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id={`checkbox-${product.id}`}
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for={`checkbox-${product.id}`} class="sr-only">
|
||||||
|
checkbox
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
|
||||||
|
<div class="text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
<data value="name">{product.name}</data>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
<data value="category">{product.category}</data>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
<data value="technology">{product.technology}</data>
|
||||||
|
</td>
|
||||||
|
<td class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400">
|
||||||
|
<data value="description">{product.description}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
#<data value="id">{product.id}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
<data value="price">{product.price}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
<data value="discount">{product.discount}</data>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="p-4 space-x-2 whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="updateProductButton"
|
||||||
|
data-drawer-target="drawer-update-product-default"
|
||||||
|
data-drawer-show="drawer-update-product-default"
|
||||||
|
aria-controls="drawer-update-product-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</svg>
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="deleteProductButton"
|
||||||
|
data-drawer-target="drawer-delete-product-default"
|
||||||
|
data-drawer-show="drawer-delete-product-default"
|
||||||
|
aria-controls="drawer-delete-product-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Delete item
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit Product Drawer -->
|
||||||
|
<div
|
||||||
|
id="drawer-update-product-default"
|
||||||
|
class="fixed top-0 right-0 z-40 w-full h-screen max-w-xs p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="drawer-label"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<h5
|
||||||
|
id="drawer-label"
|
||||||
|
class="inline-flex items-center mb-6 text-sm font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Update Product
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-drawer-dismiss="drawer-update-product-default"
|
||||||
|
aria-controls="drawer-update-product-default"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span class="sr-only">Close menu</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<form action="#">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
id="name"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
value="Education Dashboard"
|
||||||
|
placeholder="Type product name"
|
||||||
|
required=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="category"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Technology</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="category"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option selected="">Flowbite</option>
|
||||||
|
<option value="RE">React</option>
|
||||||
|
<option value="AN">Angular</option>
|
||||||
|
<option value="VU">Vue JS</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="price"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Price</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="price"
|
||||||
|
id="price"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
value="2999"
|
||||||
|
placeholder="$149"
|
||||||
|
required=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="description"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Description</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
rows="4"
|
||||||
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Enter event description here"
|
||||||
|
>Start developing with an open-source library of over 450+ UI
|
||||||
|
components, sections, and pages built with the utility classes from
|
||||||
|
Tailwind CSS and designed in Figma.</textarea
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="discount"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Discount</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="discount"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option selected="">No</option>
|
||||||
|
<option value="5">5%</option>
|
||||||
|
<option value="10">10%</option>
|
||||||
|
<option value="20">20%</option>
|
||||||
|
<option value="30">30%</option>
|
||||||
|
<option value="40">40%</option>
|
||||||
|
<option value="50">50%</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="bottom-0 left-0 flex justify-center w-full pb-4 mt-4 space-x-4 sm:absolute sm:px-4 sm:mt-0"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full justify-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
Update
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="w-full justify-center text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5 mr-1 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delete Product Drawer -->
|
||||||
|
<div
|
||||||
|
id="drawer-delete-product-default"
|
||||||
|
class="fixed top-0 right-0 z-40 w-full h-screen max-w-xs p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="drawer-label"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<h5
|
||||||
|
id="drawer-label"
|
||||||
|
class="inline-flex items-center text-sm font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Delete item
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-drawer-dismiss="drawer-delete-product-default"
|
||||||
|
aria-controls="drawer-delete-product-default"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span class="sr-only">Close menu</span>
|
||||||
|
</button>
|
||||||
|
<svg
|
||||||
|
class="w-10 h-10 mt-8 mb-4 text-red-600"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg
|
||||||
|
>
|
||||||
|
<h3 class="mb-6 text-lg text-gray-500 dark:text-gray-400">
|
||||||
|
Are you sure you want to delete this product?
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2.5 text-center mr-2 dark:focus:ring-red-900"
|
||||||
|
>
|
||||||
|
Yes, I'm sure
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 border border-gray-200 font-medium inline-flex items-center rounded-lg text-sm px-3 py-2.5 text-center dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
|
||||||
|
data-modal-target="delete-product-modal"
|
||||||
|
data-modal-toggle="delete-product-modal"
|
||||||
|
>
|
||||||
|
No, cancel
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add Product Drawer -->
|
||||||
|
<div
|
||||||
|
id="drawer-create-product-default"
|
||||||
|
class="fixed top-0 right-0 z-40 w-full h-screen max-w-xs p-4 overflow-y-auto transition-transform translate-x-full bg-white dark:bg-gray-800"
|
||||||
|
tabindex="-1"
|
||||||
|
aria-labelledby="drawer-label"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<h5
|
||||||
|
id="drawer-label"
|
||||||
|
class="inline-flex items-center mb-6 text-sm font-semibold text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
New Product
|
||||||
|
</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-drawer-dismiss="drawer-create-product-default"
|
||||||
|
aria-controls="drawer-create-product-default"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span class="sr-only">Close menu</span>
|
||||||
|
</button>
|
||||||
|
<form action="#">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="title"
|
||||||
|
id="name"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Type product name"
|
||||||
|
required=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="price"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Price</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="price"
|
||||||
|
id="price"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="$2999"
|
||||||
|
required=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="category-create"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Technology</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="category-create"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option selected="">Select category</option>
|
||||||
|
<option value="FL">Flowbite</option>
|
||||||
|
<option value="RE">React</option>
|
||||||
|
<option value="AN">Angular</option>
|
||||||
|
<option value="VU">Vue</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="description"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Description</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="description"
|
||||||
|
rows="4"
|
||||||
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Enter event description here"></textarea>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="discount-create"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Discount</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="discount-create"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
>
|
||||||
|
<option selected="">No</option>
|
||||||
|
<option value="5">5%</option>
|
||||||
|
<option value="10">10%</option>
|
||||||
|
<option value="20">20%</option>
|
||||||
|
<option value="30">30%</option>
|
||||||
|
<option value="40">40%</option>
|
||||||
|
<option value="50">50%</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="bottom-0 left-0 flex justify-center w-full pb-4 space-x-4 md:px-4 md:absolute"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
Add product
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-drawer-dismiss="drawer-create-product-default"
|
||||||
|
aria-controls="drawer-create-product-default"
|
||||||
|
class="inline-flex w-full justify-center text-gray-500 items-center bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
class="w-5 h-5 -ml-1 sm:mr-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M6 18L18 6M6 6l12 12"></path></svg
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NavPagination />
|
||||||
|
</entities-crud>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './CrudEntities.client.js';
|
||||||
|
import './CrudEntities.client.js'
|
||||||
|
</script>
|
||||||
365
src/widgets/CrudTodos.astro
Normal file
365
src/widgets/CrudTodos.astro
Normal file
@@ -0,0 +1,365 @@
|
|||||||
|
---
|
||||||
|
import NavPagination from '../widgets/NavPagination.astro'
|
||||||
|
//const res = await fetch("http://127.0.0.1:8001/api/todo");
|
||||||
|
//const res = await fetch("https://fipi.pro/api/todos");
|
||||||
|
//const res = await fetch("http://127.0.0.1:8000/api/todos/");
|
||||||
|
// Сделаем запрос к API Django при загрузке страницы
|
||||||
|
export async function load({ request }) {
|
||||||
|
// Здесь можно использовать любой URL вашего API Django
|
||||||
|
const response = await fetch('http://localhost:8000/api/todos/');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch data');
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
return {
|
||||||
|
todos: data
|
||||||
|
};
|
||||||
|
}
|
||||||
|
//const todos = await res.json();
|
||||||
|
//console.log(todos)
|
||||||
|
---
|
||||||
|
|
||||||
|
<entities-crud type="todos">
|
||||||
|
<div
|
||||||
|
class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="w-full mb-1">
|
||||||
|
<div class="mb-4">
|
||||||
|
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||||||
|
<ol
|
||||||
|
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||||||
|
>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2.5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>E-commerce</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||||||
|
aria-current="page">Todos</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<h1
|
||||||
|
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||||
|
>
|
||||||
|
All todos
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="items-center justify-between block sm:flex">
|
||||||
|
<div class="flex items-center mb-4 sm:mb-0">
|
||||||
|
<form class="sm:pr-3" action="#" method="GET">
|
||||||
|
<label for="todos-search" class="sr-only">Search</label>
|
||||||
|
<div class="relative w-48 mt-1 sm:w-64 xl:w-96">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="todos-search"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Search for todos"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center w-full sm:justify-end">
|
||||||
|
<div class="flex pl-2 space-x-1">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center ml-auto space-x-2 sm:space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-refresh
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Refresh
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
id="createTodoButton"
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
type="button"
|
||||||
|
data-drawer-target="drawer-create-todo-default"
|
||||||
|
data-drawer-show="drawer-create-todo-default"
|
||||||
|
aria-controls="drawer-create-todo-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Add todo
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<div class="inline-block min-w-full align-middle">
|
||||||
|
<div class="overflow-hidden shadow">
|
||||||
|
<table
|
||||||
|
class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-600"
|
||||||
|
> <thead class="bg-gray-100 dark:bg-gray-700">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="checkbox-all"
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for="checkbox-all" class="sr-only">checkbox</label>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
{
|
||||||
|
[
|
||||||
|
'ID',
|
||||||
|
'Задача',
|
||||||
|
'Краткое Описание',
|
||||||
|
'Приоритет',
|
||||||
|
'Дата Начала',
|
||||||
|
'Дата завершения',
|
||||||
|
'Действие',
|
||||||
|
].map((th) => (
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
{th}
|
||||||
|
</th>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody
|
||||||
|
class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
todos.map((todo) => (
|
||||||
|
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||||
|
<td class="w-4 p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id={`checkbox-${todo.id}`}
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for={`checkbox-${todo.id}`} class="sr-only">
|
||||||
|
checkbox
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-sm font-normal text-gray-500 whitespace-nowrap dark:text-gray-400">
|
||||||
|
<div class="text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
<data value="id">{todo.id}</data>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
<data value="title">{todo.title}</data>
|
||||||
|
</td>
|
||||||
|
<td class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400">
|
||||||
|
<data value="description">{todo.description}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
#<data value="status">{todo.status}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
#<data value="start_time">{todo.startTd}</data>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
#<data value="end_time">{todo.endTd}</data>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class="p-4 space-x-2 whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="updateTodoButton"
|
||||||
|
data-drawer-target="drawer-update-todo-default"
|
||||||
|
data-drawer-show="drawer-update-todo-default"
|
||||||
|
aria-controls="drawer-update-todo-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<svg>
|
||||||
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</svg>
|
||||||
|
Изменить
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
id="deleteTodoButton"
|
||||||
|
data-drawer-target="drawer-delete-todo-default"
|
||||||
|
data-drawer-show="drawer-delete-todo-default"
|
||||||
|
aria-controls="drawer-delete-todo-default"
|
||||||
|
data-drawer-placement="right"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Удалить
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NavPagination />
|
||||||
|
</entities-crud>
|
||||||
745
src/widgets/CrudUsers.astro
Normal file
745
src/widgets/CrudUsers.astro
Normal file
@@ -0,0 +1,745 @@
|
|||||||
|
---
|
||||||
|
/* eslint max-lines: 'off' */
|
||||||
|
|
||||||
|
import NavPagination from '../widgets/NavPagination.astro';
|
||||||
|
import { asset, fetchData } from '../lib/data.js';
|
||||||
|
|
||||||
|
const { class: clazz } = Astro.props;
|
||||||
|
const users = await fetchData('users');
|
||||||
|
---
|
||||||
|
|
||||||
|
<entities-crud
|
||||||
|
type="users"
|
||||||
|
class:list={['block overflow-hidden shadow', clazz]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5 dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="w-full mb-1">
|
||||||
|
<div class="mb-4">
|
||||||
|
<nav class="flex mb-5" aria-label="Breadcrumb">
|
||||||
|
<ol
|
||||||
|
class="inline-flex items-center space-x-1 text-sm font-medium md:space-x-2"
|
||||||
|
>
|
||||||
|
<li class="inline-flex items-center">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center text-gray-700 hover:text-primary-600 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2.5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-1 text-gray-700 hover:text-primary-600 md:ml-2 dark:text-gray-300 dark:hover:text-white"
|
||||||
|
>Users</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ml-1 text-gray-400 md:ml-2 dark:text-gray-500"
|
||||||
|
aria-current="page">List</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
<h1
|
||||||
|
class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white"
|
||||||
|
>
|
||||||
|
All users
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div class="sm:flex">
|
||||||
|
<div
|
||||||
|
class="items-center hidden mb-3 sm:flex sm:divide-x sm:divide-gray-100 sm:mb-0 dark:divide-gray-700"
|
||||||
|
>
|
||||||
|
<form class="lg:pr-3" action="#" method="GET">
|
||||||
|
<label for="users-search" class="sr-only">Search</label>
|
||||||
|
<div class="relative mt-1 lg:w-64 xl:w-96">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="users-search"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Search for users"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="flex pl-0 mt-3 space-x-1 sm:pl-2 sm:mt-0">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center ml-auto space-x-2 sm:space-x-3">
|
||||||
|
<!-- NOTE: Not implemented (see `./CrudProducts` for reference) -->
|
||||||
|
<!-- <button
|
||||||
|
type="button"
|
||||||
|
data-refresh
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
Refresh
|
||||||
|
</button> -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-modal-target="add-user-modal"
|
||||||
|
data-modal-toggle="add-user-modal"
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Add user
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center justify-center w-1/2 px-3 py-2 text-sm font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v3.586l-1.293-1.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V8z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Export
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<div class="inline-block min-w-full align-middle">
|
||||||
|
<div class="overflow-hidden shadow">
|
||||||
|
<table
|
||||||
|
class="min-w-full divide-y divide-gray-200 table-fixed dark:divide-gray-600"
|
||||||
|
>
|
||||||
|
<thead class="bg-gray-100 dark:bg-gray-700">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="checkbox-all"
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for="checkbox-all" class="sr-only">checkbox</label>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Biography
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Position
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Country
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
class="p-4 text-xs font-medium text-left text-gray-500 uppercase dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Actions
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody
|
||||||
|
class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
users.map((user) => (
|
||||||
|
<div>
|
||||||
|
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||||
|
<td class="w-4 p-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input
|
||||||
|
id="checkbox-{{ .id }}"
|
||||||
|
aria-describedby="checkbox-1"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
/>
|
||||||
|
<label for="checkbox-{{ .id }}" class="sr-only">
|
||||||
|
checkbox
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="flex items-center p-4 mr-12 space-x-6 whitespace-nowrap">
|
||||||
|
<img
|
||||||
|
class="w-10 h-10 rounded-full"
|
||||||
|
src={asset(`/images/users/${user.avatar}`)}
|
||||||
|
alt={`${user.name} avatar`}
|
||||||
|
/>
|
||||||
|
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
<div class="text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
{user.name}
|
||||||
|
</div>
|
||||||
|
<div class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
{user.email}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="max-w-sm p-4 overflow-hidden text-base font-normal text-gray-500 truncate xl:max-w-xs dark:text-gray-400">
|
||||||
|
{user.biography}
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
{user.position}
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
{user.country}
|
||||||
|
</td>
|
||||||
|
<td class="p-4 text-base font-normal text-gray-900 whitespace-nowrap dark:text-white">
|
||||||
|
<div class="flex items-center">
|
||||||
|
{user.status === 'Active' ? (
|
||||||
|
<div class="h-2.5 w-2.5 rounded-full bg-green-400 mr-2" />
|
||||||
|
) : (
|
||||||
|
<div class="h-2.5 w-2.5 rounded-full bg-red-500 mr-2" />
|
||||||
|
)}
|
||||||
|
{user.status}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="p-4 space-x-2 whitespace-nowrap">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-modal-target="edit-user-modal"
|
||||||
|
data-modal-toggle="edit-user-modal"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<>
|
||||||
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
</svg>
|
||||||
|
Edit user
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
data-modal-target="delete-user-modal"
|
||||||
|
data-modal-toggle="delete-user-modal"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Delete user
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Edit User Modal -->
|
||||||
|
<div
|
||||||
|
class="fixed left-0 right-0 z-50 items-center justify-center hidden overflow-x-hidden overflow-y-auto top-4 md:inset-0 h-modal sm:h-full"
|
||||||
|
id="edit-user-modal"
|
||||||
|
>
|
||||||
|
<div class="relative w-full h-full max-w-2xl px-4 md:h-auto">
|
||||||
|
<!-- Modal content -->
|
||||||
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
|
||||||
|
<!-- Modal header -->
|
||||||
|
<div
|
||||||
|
class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-semibold dark:text-white">Edit user</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
data-modal-toggle="edit-user-modal"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Modal body -->
|
||||||
|
<div class="p-6 space-y-6">
|
||||||
|
<form action="#">
|
||||||
|
<div class="grid grid-cols-6 gap-6">
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="first-name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>First Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="first-name"
|
||||||
|
value="Bonnie"
|
||||||
|
id="first-name"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Bonnie"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="last-name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Last Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="last-name"
|
||||||
|
value="Green"
|
||||||
|
id="last-name"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Green"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value="bonnie@flowbite.com"
|
||||||
|
id="email"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="example@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="position"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Position</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="position"
|
||||||
|
value="React Developer"
|
||||||
|
id="position"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="e.g. React developer"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="current-password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Current Password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="current-password"
|
||||||
|
value="••••••••"
|
||||||
|
id="current-password"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="new-password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>New Password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="new-password"
|
||||||
|
value="••••••••"
|
||||||
|
id="new-password"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6">
|
||||||
|
<label
|
||||||
|
for="biography"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Biography</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="biography"
|
||||||
|
rows="4"
|
||||||
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="👨💻Full-stack web developer. Open-source contributor."
|
||||||
|
>👨💻Full-stack web developer. Open-source contributor.</textarea
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Modal footer -->
|
||||||
|
<div
|
||||||
|
class="items-center p-6 border-t border-gray-200 rounded-b dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
type="submit">Save all</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Add User Modal -->
|
||||||
|
<div
|
||||||
|
class="fixed left-0 right-0 z-50 items-center justify-center hidden overflow-x-hidden overflow-y-auto top-4 md:inset-0 h-modal sm:h-full"
|
||||||
|
id="add-user-modal"
|
||||||
|
>
|
||||||
|
<div class="relative w-full h-full max-w-2xl px-4 md:h-auto">
|
||||||
|
<!-- Modal content -->
|
||||||
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
|
||||||
|
<!-- Modal header -->
|
||||||
|
<div
|
||||||
|
class="flex items-start justify-between p-5 border-b rounded-t dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<h3 class="text-xl font-semibold dark:text-white">Add new user</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
data-modal-toggle="add-user-modal"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Modal body -->
|
||||||
|
<div class="p-6 space-y-6">
|
||||||
|
<form action="#">
|
||||||
|
<div class="grid grid-cols-6 gap-6">
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="first-name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>First Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="first-name"
|
||||||
|
id="first-name"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Bonnie"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="last-name"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Last Name</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="last-name"
|
||||||
|
id="last-name"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Green"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="example@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6 sm:col-span-3">
|
||||||
|
<label
|
||||||
|
for="position"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Position</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="position"
|
||||||
|
id="position"
|
||||||
|
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="e.g. React developer"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-6">
|
||||||
|
<label
|
||||||
|
for="biography"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Biography</label
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
id="biography"
|
||||||
|
rows="4"
|
||||||
|
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="👨💻Full-stack web developer. Open-source contributor."
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- Modal footer -->
|
||||||
|
<div
|
||||||
|
class="items-center p-6 border-t border-gray-200 rounded-b dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
type="submit">Add user</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delete User Modal -->
|
||||||
|
<div
|
||||||
|
class="fixed left-0 right-0 z-50 items-center justify-center hidden overflow-x-hidden overflow-y-auto top-4 md:inset-0 h-modal sm:h-full"
|
||||||
|
id="delete-user-modal"
|
||||||
|
>
|
||||||
|
<div class="relative w-full h-full max-w-md px-4 md:h-auto">
|
||||||
|
<!-- Modal content -->
|
||||||
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
|
||||||
|
<!-- Modal header -->
|
||||||
|
<div class="flex justify-end p-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
data-modal-toggle="delete-user-modal"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- Modal body -->
|
||||||
|
<div class="p-6 pt-0 text-center">
|
||||||
|
<svg
|
||||||
|
class="w-16 h-16 mx-auto text-red-600"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg
|
||||||
|
>
|
||||||
|
<h3 class="mt-5 mb-6 text-lg text-gray-500 dark:text-gray-400">
|
||||||
|
Are you sure you want to delete this user?
|
||||||
|
</h3>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-base inline-flex items-center px-3 py-2.5 text-center mr-2 dark:focus:ring-red-800"
|
||||||
|
>
|
||||||
|
Yes, I'm sure
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-gray-900 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-primary-300 border border-gray-200 font-medium inline-flex items-center rounded-lg text-base px-3 py-2.5 text-center dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700"
|
||||||
|
data-modal-toggle="delete-user-modal"
|
||||||
|
>
|
||||||
|
No, cancel
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<NavPagination />
|
||||||
|
</entities-crud>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './CrudEntities.client.js';
|
||||||
|
import './CrudEntities.client.js'
|
||||||
|
</script>
|
||||||
3424
src/widgets/DashBoard.astro
Normal file
3424
src/widgets/DashBoard.astro
Normal file
File diff suppressed because it is too large
Load Diff
662
src/widgets/DashBoard.client.ts
Normal file
662
src/widgets/DashBoard.client.ts
Normal file
@@ -0,0 +1,662 @@
|
|||||||
|
/* eslint-disable max-lines */
|
||||||
|
|
||||||
|
import ApexCharts from 'apexcharts';
|
||||||
|
|
||||||
|
const getMainChartOptions = () => {
|
||||||
|
let mainChartColors = {};
|
||||||
|
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
mainChartColors = {
|
||||||
|
borderColor: '#374151',
|
||||||
|
labelColor: '#9CA3AF',
|
||||||
|
opacityFrom: 0,
|
||||||
|
opacityTo: 0.15,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
mainChartColors = {
|
||||||
|
borderColor: '#F3F4F6',
|
||||||
|
labelColor: '#6B7280',
|
||||||
|
opacityFrom: 0.45,
|
||||||
|
opacityTo: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
height: 420,
|
||||||
|
type: 'area',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
foreColor: mainChartColors.labelColor,
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: 'gradient',
|
||||||
|
gradient: {
|
||||||
|
enabled: true,
|
||||||
|
opacityFrom: mainChartColors.opacityFrom,
|
||||||
|
opacityTo: mainChartColors.opacityTo,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
borderColor: mainChartColors.borderColor,
|
||||||
|
strokeDashArray: 1,
|
||||||
|
padding: {
|
||||||
|
left: 35,
|
||||||
|
bottom: 15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Revenue',
|
||||||
|
data: [6356, 6218, 6156, 6526, 6356, 6256, 6056],
|
||||||
|
color: '#1A56DB',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Revenue (previous period)',
|
||||||
|
data: [6556, 6725, 6424, 6356, 6586, 6756, 6616],
|
||||||
|
color: '#FDBA8C',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
markers: {
|
||||||
|
size: 5,
|
||||||
|
strokeColors: '#ffffff',
|
||||||
|
hover: {
|
||||||
|
size: undefined,
|
||||||
|
sizeOffset: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: [
|
||||||
|
'01 Feb',
|
||||||
|
'02 Feb',
|
||||||
|
'03 Feb',
|
||||||
|
'04 Feb',
|
||||||
|
'05 Feb',
|
||||||
|
'06 Feb',
|
||||||
|
'07 Feb',
|
||||||
|
],
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [mainChartColors.labelColor],
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
color: mainChartColors.borderColor,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
color: mainChartColors.borderColor,
|
||||||
|
},
|
||||||
|
crosshairs: {
|
||||||
|
show: true,
|
||||||
|
position: 'back',
|
||||||
|
stroke: {
|
||||||
|
color: mainChartColors.borderColor,
|
||||||
|
width: 1,
|
||||||
|
dashArray: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [mainChartColors.labelColor],
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
},
|
||||||
|
formatter(value) {
|
||||||
|
return `$${value}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 500,
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
labels: {
|
||||||
|
colors: [mainChartColors.labelColor],
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 1024,
|
||||||
|
options: {
|
||||||
|
xaxis: {
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (document.getElementById('main-chart')) {
|
||||||
|
const chart = new ApexCharts(
|
||||||
|
document.getElementById('main-chart'),
|
||||||
|
getMainChartOptions(),
|
||||||
|
);
|
||||||
|
chart.render();
|
||||||
|
|
||||||
|
// init again when toggling dark mode
|
||||||
|
document.addEventListener('dark-mode', () => {
|
||||||
|
chart.updateOptions(getMainChartOptions());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById('new-products-chart')) {
|
||||||
|
const options = {
|
||||||
|
colors: ['#1A56DB', '#FDBA8C'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Quantity',
|
||||||
|
color: '#1A56DB',
|
||||||
|
data: [
|
||||||
|
{ x: '01 Feb', y: 170 },
|
||||||
|
{ x: '02 Feb', y: 180 },
|
||||||
|
{ x: '03 Feb', y: 164 },
|
||||||
|
{ x: '04 Feb', y: 145 },
|
||||||
|
{ x: '05 Feb', y: 194 },
|
||||||
|
{ x: '06 Feb', y: 170 },
|
||||||
|
{ x: '07 Feb', y: 155 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: '140px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
foreColor: '#4B5563',
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '90%',
|
||||||
|
borderRadius: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: false,
|
||||||
|
intersect: false,
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'darken',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 5,
|
||||||
|
colors: ['transparent'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
floating: false,
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const chart = new ApexCharts(
|
||||||
|
document.getElementById('new-products-chart'),
|
||||||
|
options,
|
||||||
|
);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById('sales-by-category')) {
|
||||||
|
const options = {
|
||||||
|
colors: ['#1A56DB', '#FDBA8C'],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Desktop PC',
|
||||||
|
color: '#1A56DB',
|
||||||
|
data: [
|
||||||
|
{ x: '01 Feb', y: 170 },
|
||||||
|
{ x: '02 Feb', y: 180 },
|
||||||
|
{ x: '03 Feb', y: 164 },
|
||||||
|
{ x: '04 Feb', y: 145 },
|
||||||
|
{ x: '05 Feb', y: 194 },
|
||||||
|
{ x: '06 Feb', y: 170 },
|
||||||
|
{ x: '07 Feb', y: 155 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Phones',
|
||||||
|
color: '#FDBA8C',
|
||||||
|
data: [
|
||||||
|
{ x: '01 Feb', y: 120 },
|
||||||
|
{ x: '02 Feb', y: 294 },
|
||||||
|
{ x: '03 Feb', y: 167 },
|
||||||
|
{ x: '04 Feb', y: 179 },
|
||||||
|
{ x: '05 Feb', y: 245 },
|
||||||
|
{ x: '06 Feb', y: 182 },
|
||||||
|
{ x: '07 Feb', y: 143 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Gaming/Console',
|
||||||
|
color: '#17B0BD',
|
||||||
|
data: [
|
||||||
|
{ x: '01 Feb', y: 220 },
|
||||||
|
{ x: '02 Feb', y: 194 },
|
||||||
|
{ x: '03 Feb', y: 217 },
|
||||||
|
{ x: '04 Feb', y: 279 },
|
||||||
|
{ x: '05 Feb', y: 215 },
|
||||||
|
{ x: '06 Feb', y: 263 },
|
||||||
|
{ x: '07 Feb', y: 183 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: '420px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
foreColor: '#4B5563',
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '90%',
|
||||||
|
borderRadius: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: true,
|
||||||
|
intersect: false,
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'darken',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 5,
|
||||||
|
colors: ['transparent'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
floating: false,
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const chart = new ApexCharts(
|
||||||
|
document.getElementById('sales-by-category'),
|
||||||
|
options,
|
||||||
|
);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
const getVisitorsChartOptions = () => {
|
||||||
|
let visitorsChartColors = {};
|
||||||
|
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
visitorsChartColors = {
|
||||||
|
fillGradientShade: 'dark',
|
||||||
|
fillGradientShadeIntensity: 0.45,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
visitorsChartColors = {
|
||||||
|
fillGradientShade: 'light',
|
||||||
|
fillGradientShadeIntensity: 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Visitors',
|
||||||
|
data: [500, 590, 600, 520, 610, 550, 600],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labels: [
|
||||||
|
'01 Feb',
|
||||||
|
'02 Feb',
|
||||||
|
'03 Feb',
|
||||||
|
'04 Feb',
|
||||||
|
'05 Feb',
|
||||||
|
'06 Feb',
|
||||||
|
'07 Feb',
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
type: 'area',
|
||||||
|
height: '305px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
sparkline: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: 'gradient',
|
||||||
|
gradient: {
|
||||||
|
shade: visitorsChartColors.fillGradientShade,
|
||||||
|
shadeIntensity: visitorsChartColors.fillGradientShadeIntensity,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
area: {
|
||||||
|
fillTo: 'end',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
monochrome: {
|
||||||
|
enabled: true,
|
||||||
|
color: '#1A56DB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSignupsChartOptions = () => {
|
||||||
|
let signupsChartColors = {};
|
||||||
|
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
signupsChartColors = {
|
||||||
|
backgroundBarColors: [
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
'#374151',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
signupsChartColors = {
|
||||||
|
backgroundBarColors: [
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
'#E5E7EB',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Users',
|
||||||
|
data: [1334, 2435, 1753, 1328, 1155, 1632, 1336],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labels: [
|
||||||
|
'01 Feb',
|
||||||
|
'02 Feb',
|
||||||
|
'03 Feb',
|
||||||
|
'04 Feb',
|
||||||
|
'05 Feb',
|
||||||
|
'06 Feb',
|
||||||
|
'07 Feb',
|
||||||
|
],
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: '140px',
|
||||||
|
foreColor: '#4B5563',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
monochrome: {
|
||||||
|
enabled: true,
|
||||||
|
color: '#1A56DB',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '25%',
|
||||||
|
borderRadius: 3,
|
||||||
|
colors: {
|
||||||
|
backgroundBarColors: signupsChartColors.backgroundBarColors,
|
||||||
|
backgroundBarRadius: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
hideOverflowingLabels: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
floating: false,
|
||||||
|
labels: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: true,
|
||||||
|
intersect: false,
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'darken',
|
||||||
|
value: 0.8,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (document.getElementById('week-signups-chart')) {
|
||||||
|
const chart = new ApexCharts(
|
||||||
|
document.getElementById('week-signups-chart'),
|
||||||
|
getSignupsChartOptions(),
|
||||||
|
);
|
||||||
|
chart.render();
|
||||||
|
|
||||||
|
// init again when toggling dark mode
|
||||||
|
document.addEventListener('dark-mode', () => {
|
||||||
|
chart.updateOptions(getSignupsChartOptions());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTrafficChannelsChartOptions = () => {
|
||||||
|
let trafficChannelsChartColors = {};
|
||||||
|
|
||||||
|
if (document.documentElement.classList.contains('dark')) {
|
||||||
|
trafficChannelsChartColors = {
|
||||||
|
strokeColor: '#1f2937',
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
trafficChannelsChartColors = {
|
||||||
|
strokeColor: '#ffffff',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
series: [70, 5, 25],
|
||||||
|
labels: ['Desktop', 'Tablet', 'Phone'],
|
||||||
|
colors: ['#16BDCA', '#FDBA8C', '#1A56DB'],
|
||||||
|
chart: {
|
||||||
|
type: 'donut',
|
||||||
|
height: 400,
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
toolbar: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 430,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
height: 300,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
stroke: {
|
||||||
|
colors: [trafficChannelsChartColors.strokeColor],
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'darken',
|
||||||
|
value: 0.9,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: true,
|
||||||
|
followCursor: false,
|
||||||
|
fillSeriesColor: false,
|
||||||
|
inverseOrder: true,
|
||||||
|
style: {
|
||||||
|
fontSize: '14px',
|
||||||
|
fontFamily: 'Inter, sans-serif',
|
||||||
|
},
|
||||||
|
x: {
|
||||||
|
show: true,
|
||||||
|
formatter(_, { seriesIndex, w }) {
|
||||||
|
const label = w.config.labels[seriesIndex];
|
||||||
|
return label;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
formatter(value) {
|
||||||
|
return `${value}%`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
if (document.getElementById('traffic-by-device')) {
|
||||||
|
const chart = new ApexCharts(
|
||||||
|
document.getElementById('traffic-by-device'),
|
||||||
|
getTrafficChannelsChartOptions(),
|
||||||
|
);
|
||||||
|
chart.render();
|
||||||
|
|
||||||
|
// init again when toggling dark mode
|
||||||
|
document.addEventListener('dark-mode', () => {
|
||||||
|
chart.updateOptions(getTrafficChannelsChartOptions());
|
||||||
|
});
|
||||||
|
}
|
||||||
47
src/widgets/ErrorMaintenance.astro
Normal file
47
src/widgets/ErrorMaintenance.astro
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-center items-center px-6 mx-auto h-screen xl:px-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="block mb-5 md:max-w-md">
|
||||||
|
<img
|
||||||
|
src={asset('images/illustrations/maintenance.svg')}
|
||||||
|
alt="maintenance image"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="text-center xl:max-w-4xl">
|
||||||
|
<h1
|
||||||
|
class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white"
|
||||||
|
>
|
||||||
|
Under Maintenance
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Sorry for the inconvenience but we’re performing some maintenance at the
|
||||||
|
moment. If you need to you can always <a
|
||||||
|
href={'#'}
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>contact us</a
|
||||||
|
>, otherwise we’ll be back online shortly!.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={url()}
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-3 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mr-2 -ml-1 w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Go back home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
40
src/widgets/ErrorNotFound.astro
Normal file
40
src/widgets/ErrorNotFound.astro
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-center items-center px-6 mx-auto h-screen xl:px-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="block md:max-w-lg">
|
||||||
|
<img src={asset('images/illustrations/404.svg')} alt="astronaut image" />
|
||||||
|
</div>
|
||||||
|
<div class="text-center xl:max-w-4xl">
|
||||||
|
<h1
|
||||||
|
class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white"
|
||||||
|
>
|
||||||
|
Page not found
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400"
|
||||||
|
>
|
||||||
|
Oops! Looks like you followed a bad link. If you think this is a problem
|
||||||
|
with us, please tell us.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={url('')}
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-3 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mr-2 -ml-1 w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Go back home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
40
src/widgets/ErrorServer.astro
Normal file
40
src/widgets/ErrorServer.astro
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col justify-center items-center px-6 mx-auto h-screen xl:px-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<div class="block md:max-w-lg">
|
||||||
|
<img src={asset('images/illustrations/500.svg')} alt="astronaut image" />
|
||||||
|
</div>
|
||||||
|
<div class="text-center xl:max-w-4xl">
|
||||||
|
<h1
|
||||||
|
class="mb-3 text-2xl font-bold leading-tight text-gray-900 sm:text-4xl lg:text-5xl dark:text-white"
|
||||||
|
>
|
||||||
|
Something has gone seriously wrong
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="mb-5 text-base font-normal text-gray-500 md:text-lg dark:text-gray-400"
|
||||||
|
>
|
||||||
|
It's always time for a coffee break. We should be back by the time you
|
||||||
|
finish your coffee.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={url('')}
|
||||||
|
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-3 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="mr-2 -ml-1 w-5 h-5"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Go back home
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
74
src/widgets/FormForgotPassword.astro
Normal file
74
src/widgets/FormForgotPassword.astro
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="FlowBite Logo" class="mr-4 h-11" />
|
||||||
|
<span>Flowbite</span>
|
||||||
|
</a>
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div class="w-full p-6 sm:p-8">
|
||||||
|
<h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Forgot your password?
|
||||||
|
</h2>
|
||||||
|
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
Don't fret! Just type in your email and we will send you a code to reset
|
||||||
|
your password!
|
||||||
|
</p>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Your email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>I accept the <a
|
||||||
|
href="#"
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Terms and Conditions</a
|
||||||
|
></label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Reset password</button
|
||||||
|
>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
90
src/widgets/FormProfileLock.astro
Normal file
90
src/widgets/FormProfileLock.astro
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="FlowBite Logo" class="mr-4 h-11" />
|
||||||
|
<span>Flowbite</span>
|
||||||
|
</a>
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-md bg-white rounded-lg shadow md:mt-0 xl:p-0 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div class="w-full p-6 sm:p-8">
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<img
|
||||||
|
class="w-8 h-8 rounded-full"
|
||||||
|
src={asset('images/users/bonnie-green.png')}
|
||||||
|
alt="Bonnie image"
|
||||||
|
/>
|
||||||
|
<h2 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Bonnie Green
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p class="text-base font-normal text-gray-500 dark:text-gray-400">
|
||||||
|
Better to be safe than sorry.
|
||||||
|
</p>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="profile-lock"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Your password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="profile-lock"
|
||||||
|
id="profile-lock"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="••••••••"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>I accept the <a
|
||||||
|
href="#"
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Terms and Conditions</a
|
||||||
|
></label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 015.905-.75 1 1 0 001.937-.5A5.002 5.002 0 0010 2z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
|
Unlock
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
99
src/widgets/FormResetPassword.astro
Normal file
99
src/widgets/FormResetPassword.astro
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="FlowBite Logo" class="mr-4 h-11" />
|
||||||
|
<span>Flowbite</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-xl p-6 space-y-8 bg-white rounded-lg shadow sm:p-8 dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Reset your password
|
||||||
|
</h2>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Your email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>New password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="confirm-password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Confirm New Password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="confirm-password"
|
||||||
|
id="confirm-password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>I accept the <a
|
||||||
|
href="#"
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Terms and Conditions</a
|
||||||
|
></label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Reset password</button
|
||||||
|
>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
89
src/widgets/FormSignIn copy.astro
Normal file
89
src/widgets/FormSignIn copy.astro
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
import { asset } from '../lib/data.js'
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="we.pro Logo" class="mr-4 h-11" />
|
||||||
|
<span>WE.PRO</span>
|
||||||
|
</a>
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Войдите на платформу
|
||||||
|
</h2>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш пароль</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start flex-wrap">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white">Запомнить меня</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-auto mt-4 text-left text-sm text-primary-700 hover:underline dark:text-primary-500 w-full"
|
||||||
|
>забыли пароль?</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Войдите в свой аккаунт</button
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
Не зарегистрирован? <a
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Зарегистрироваться</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
139
src/widgets/FormSignIn.astro
Normal file
139
src/widgets/FormSignIn.astro
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
---
|
||||||
|
import { asset, post } from '../lib/data.js'
|
||||||
|
|
||||||
|
export let email: string = '';
|
||||||
|
export let password: string = '';
|
||||||
|
export let error: string = '';
|
||||||
|
|
||||||
|
async function login(event: Event) {
|
||||||
|
event.preventDefault(); // Предотвращает стандартное поведение отправки формы
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await post('http://127.0.0.1:8000/api/accounts/login/', {
|
||||||
|
email,
|
||||||
|
password
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Network response was not ok');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(data); // Убедитесь, что данные отображаются в консоли
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error logging in:', error);
|
||||||
|
setError('Failed to login');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setError(message: string) {
|
||||||
|
error = message;
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
function setLogin(message: string) {
|
||||||
|
login = message;
|
||||||
|
console.log(login);
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="we.pro Logo" class="mr-4 h-11" />
|
||||||
|
<span>WE.PRO</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Войдите на платформу
|
||||||
|
</h2>
|
||||||
|
<form class="mt-8 space-y-6" action="#" @submit=${login}>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
bind:value=${email}
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш пароль</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
bind:value=${password}
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start flex-wrap">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white">Запомнить меня</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-auto mt-4 text-left text-sm text-primary-700 hover:underline dark:text-primary-500 w-full"
|
||||||
|
>забыли пароль?</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Войдите в свой аккаунт</button
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
Не зарегистрирован? <a
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Зарегистрироваться</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p>${error}</p>
|
||||||
|
</form client:load>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<input v-model="email" type="email" placeholder="Email">
|
||||||
|
<input v-model="password" type="password" placeholder="Password">
|
||||||
|
<button @click="login">Login</button>
|
||||||
|
</div>
|
||||||
105
src/widgets/FormSignUp.astro
Normal file
105
src/widgets/FormSignUp.astro
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src={asset('images/logo.svg')} alt="FlowBite Logo" class="mr-4 h-11" />
|
||||||
|
<span>Flowbite</span>
|
||||||
|
</a>
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Create a Free Account
|
||||||
|
</h2>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Your email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Your password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="confirm-password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Confirm password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="confirm-password"
|
||||||
|
id="confirm-password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white"
|
||||||
|
>I accept the <a
|
||||||
|
href="#"
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Terms and Conditions</a
|
||||||
|
></label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Create account</button
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
Already have an account? <a
|
||||||
|
href="#"
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Login here</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
20
src/widgets/GitHubButton.astro
Normal file
20
src/widgets/GitHubButton.astro
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
repository: string;
|
||||||
|
}
|
||||||
|
const { repository } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="hidden mr-3 -mb-1 sm:block">
|
||||||
|
<a
|
||||||
|
class="github-button"
|
||||||
|
href={`https://github.com/${repository}`}
|
||||||
|
data-color-scheme="no-preference: dark; light: light; dark: light;"
|
||||||
|
data-icon="octicon-star"
|
||||||
|
data-size="large"
|
||||||
|
data-show-count="true"
|
||||||
|
aria-label={`Star ${repository} on GitHub`}>Star</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||||
91
src/widgets/LandingReadme.astro
Normal file
91
src/widgets/LandingReadme.astro
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
---
|
||||||
|
import Code from 'astro/components/Code.astro'
|
||||||
|
|
||||||
|
import Confettis from '../widgets/ConfettiLauncher.astro'
|
||||||
|
|
||||||
|
import AstroLogo from '../assets/astro-icon.svg?raw'
|
||||||
|
import FlowbiteLogo from '../assets/flowbite-logo.svg?raw'
|
||||||
|
|
||||||
|
import * as readMe from '../../README.md'
|
||||||
|
import { SITE_TITLE } from '../app/constants.js'
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 text-slate-800 dark:text-slate-100 mb-20 p-4 lg:p-16 shadow-xl shadow-slate-200 dark:shadow-slate-900"
|
||||||
|
>
|
||||||
|
<header
|
||||||
|
class="p-8 flex justify-center items-center flex-wrap flex-col w-full mt-16"
|
||||||
|
>
|
||||||
|
<div class="flex justify-center w-full">
|
||||||
|
<div
|
||||||
|
set:html={AstroLogo}
|
||||||
|
class="svg-inline w-16 h-16 text-violet-700 dark:text-violet-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format dark:format-invert lg:format-lg mt-32">
|
||||||
|
<p
|
||||||
|
class="text-4xl lg:text-8xl dark:text-slate-200 text-slate-600 leading-tight"
|
||||||
|
>
|
||||||
|
Hello <a
|
||||||
|
rel="noopener nofollow"
|
||||||
|
href="https://astro.build"
|
||||||
|
class="font-bold text-transparent bg-clip-text bg-gradient-to-br from-pink-400 to-violet-800 dark:from-pink-300 dark:to-violet-700 no-underline"
|
||||||
|
>Astro</a
|
||||||
|
>…
|
||||||
|
<br />meet <a
|
||||||
|
rel="noopener nofollow"
|
||||||
|
href="https://flowbite.com"
|
||||||
|
class="font-bold text-blue-600 dark:text-blue-500 no-underline"
|
||||||
|
>Flowbite</a
|
||||||
|
>!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex justify-center w-full">
|
||||||
|
<Confettis>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-blue-800 hover:text-white border border-blue-700 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-100 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800"
|
||||||
|
>Click me!</button
|
||||||
|
>
|
||||||
|
</Confettis>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-center w-full my-16">
|
||||||
|
<div set:html={FlowbiteLogo} class="svg-inline w-16 h-16" />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="flex justify-center w-full pb-24">
|
||||||
|
<div class="w-full format dark:format-invert">
|
||||||
|
<Code
|
||||||
|
lang={'powershell' /* Looks cool */}
|
||||||
|
code={`git clone \\
|
||||||
|
https://github.com/themesberg/flowbite-astro-admin-dashboard.git`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<article class="flex justify-center pt-32 pb-32">
|
||||||
|
<div class="w-full readme format dark:format-invert lg:format-lg">
|
||||||
|
<h1 class="text-center">
|
||||||
|
<!-- {readMe.getHeadings()[0].text} -->
|
||||||
|
{SITE_TITLE}
|
||||||
|
</h1>
|
||||||
|
<readMe.Content />
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Override in Markdown H1 title */
|
||||||
|
.readme :global(h1:nth-of-type(2)) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-inline :global(svg) {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
src/widgets/NavPagination.astro
Normal file
83
src/widgets/NavPagination.astro
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
<nav-pagination
|
||||||
|
class="block sticky bottom-0 right-0 items-center w-full p-4 bg-white border-t border-gray-200 sm:flex sm:justify-between dark:bg-gray-800 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div class="flex items-center mb-4 sm:mb-0">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-7 h-7"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex justify-center p-1 mr-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-7 h-7"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
<span class="text-sm font-normal text-gray-500 dark:text-gray-400"
|
||||||
|
>Showing <span class="font-semibold text-gray-900 dark:text-white"
|
||||||
|
>1-20</span
|
||||||
|
> of <span class="font-semibold text-gray-900 dark:text-white">2290</span
|
||||||
|
></span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center justify-center flex-1 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 mr-1 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="inline-flex items-center justify-center flex-1 px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 ml-1 -mr-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav-pagination>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ...
|
||||||
|
</script>
|
||||||
50
src/widgets/PictureUploader.astro
Normal file
50
src/widgets/PictureUploader.astro
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
import { asset, url } from '../lib/data.js';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
const { title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<img
|
||||||
|
class="mb-4 rounded-lg w-28 h-28 sm:mb-0 xl:mb-4 2xl:mb-0"
|
||||||
|
src={asset('images/users/bonnie-green-2x.png')}
|
||||||
|
alt="Jese picture"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<div class="mb-4 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
JPG, GIF or PNG. Max size of 800K
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 mr-2 -ml-1"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"
|
||||||
|
></path><path d="M9 13h2v5a1 1 0 11-2 0v-5z"></path></svg
|
||||||
|
>
|
||||||
|
Upload picture
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="py-2 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Upload handler...
|
||||||
|
</script>
|
||||||
1165
src/widgets/PricingPlan.astro
Normal file
1165
src/widgets/PricingPlan.astro
Normal file
File diff suppressed because it is too large
Load Diff
4
src/widgets/README.md
Normal file
4
src/widgets/README.md
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
This is where generic, composable, re-usable UI components can be extracted from [../modules](../modules), e.g.:
|
||||||
|
|
||||||
|
- `<Button variant="..."/>`
|
||||||
|
- `<Checkbox />`
|
||||||
30
src/widgets/SearchInput.astro
Normal file
30
src/widgets/SearchInput.astro
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
---
|
||||||
|
// _
|
||||||
|
---
|
||||||
|
|
||||||
|
<form action="#" method="GET" class="hidden lg:block lg:pl-3.5">
|
||||||
|
<label for="topbar-search" class="sr-only">Search</label>
|
||||||
|
<div class="relative mt-1 lg:w-96">
|
||||||
|
<div
|
||||||
|
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-5 h-5 text-gray-500 dark:text-gray-400"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||||
|
clip-rule="evenodd"></path></svg
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="topbar-search"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="Search"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
50
src/widgets/TodoList.vue
Normal file
50
src/widgets/TodoList.vue
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
<template>
|
||||||
|
<div class='mt-10 ml-10 text-gray-500'>
|
||||||
|
<h2>Список задач</h2>
|
||||||
|
<ul>
|
||||||
|
<li v-for="todo in todos" :key="todo.id">
|
||||||
|
<div>{{ todo.title }}</div>
|
||||||
|
<div>{{ todo.content }}</div>
|
||||||
|
{{ todo.title }} - {{ todo.content }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import axios from 'axios'
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
|
||||||
|
interface Todo {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
todos: [] as Todo[] // Массив для хранения списка задач
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// Здесь можно выполнять запрос к API для получения списка задач
|
||||||
|
// Например, используя библиотеку axios:
|
||||||
|
axios.get<Todo[]>('http://127.0.0.1:8000/api/todos/test/')
|
||||||
|
.then((response) => {
|
||||||
|
// Записываем полученные данные в массив todos
|
||||||
|
this.todos = response.data;
|
||||||
|
|
||||||
|
// Выводим информацию о запросе в консоль
|
||||||
|
console.log('Успешный запрос к API:');
|
||||||
|
console.log('Метод запроса:', response.config.method);
|
||||||
|
console.log('URL запроса:', response.config.url);
|
||||||
|
console.log('Статус запроса:', response.status);
|
||||||
|
console.log('Тело ответа:', response.data);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Ошибка при получении списка задач:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
22
src/widgets/ToggleSwitch.astro
Normal file
22
src/widgets/ToggleSwitch.astro
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
id: string;
|
||||||
|
checked?: boolean;
|
||||||
|
class?: string;
|
||||||
|
}
|
||||||
|
const { id, checked = false, class: clazz, ...attrs } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<label
|
||||||
|
for={id}
|
||||||
|
class:list={['relative flex items-center cursor-pointer', clazz]}
|
||||||
|
{...attrs}
|
||||||
|
>
|
||||||
|
<input type="checkbox" id={id} class="sr-only" {checked} />
|
||||||
|
<span
|
||||||
|
class:list={[
|
||||||
|
'bg-gray-200 dark:bg-gray-700 ',
|
||||||
|
'border-gray-200 dark:border-gray-600',
|
||||||
|
'h-6 rounded-full w-11 toggle-bg border',
|
||||||
|
]}></span>
|
||||||
|
</label>
|
||||||
1040
src/widgets/UserSettings.astro
Normal file
1040
src/widgets/UserSettings.astro
Normal file
File diff suppressed because it is too large
Load Diff
125
src/widgets/sign-in.vue
Normal file
125
src/widgets/sign-in.vue
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col items-center justify-center px-6 pt-8 mx-auto pt:mt-0 dark:bg-gray-900"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="flex items-center justify-center mb-8 text-2xl font-semibold lg:mb-10 dark:text-white"
|
||||||
|
>
|
||||||
|
<img src='' alt="we.pro Logo" class="mr-4 h-11" />
|
||||||
|
<span>WE.PRO</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Card -->
|
||||||
|
<div
|
||||||
|
class="w-full max-w-xl p-6 space-y-8 sm:p-8 bg-white rounded-lg shadow dark:bg-gray-800"
|
||||||
|
>
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">
|
||||||
|
Войдите на платформу
|
||||||
|
</h2>
|
||||||
|
<form class="mt-8 space-y-6" action="#">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="email"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш email</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
v-model="email"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
for="password"
|
||||||
|
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>Ваш пароль</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="password"
|
||||||
|
v-model="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start flex-wrap">
|
||||||
|
<div class="flex items-center h-5">
|
||||||
|
<input
|
||||||
|
id="remember"
|
||||||
|
aria-describedby="remember"
|
||||||
|
name="remember"
|
||||||
|
type="checkbox"
|
||||||
|
class="w-4 h-4 border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="ml-3 text-sm">
|
||||||
|
<label
|
||||||
|
for="remember"
|
||||||
|
class="font-medium text-gray-900 dark:text-white">Запомнить меня</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="ml-auto mt-4 text-left text-sm text-primary-700 hover:underline dark:text-primary-500 w-full"
|
||||||
|
>забыли пароль?</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
@click="login"
|
||||||
|
class="w-full px-5 py-3 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
|
||||||
|
>Войдите в свой аккаунт</button
|
||||||
|
>
|
||||||
|
<div class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||||
|
Не зарегистрирован? <a
|
||||||
|
class="text-primary-700 hover:underline dark:text-primary-500"
|
||||||
|
>Зарегистрироваться</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
email: '',
|
||||||
|
password: ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async login() {
|
||||||
|
try {
|
||||||
|
const response = await axios.post('http://127.0.0.1:8000/api/accounts/login/', {
|
||||||
|
user: {
|
||||||
|
email: this.email,
|
||||||
|
password: this.password
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(response);
|
||||||
|
// Redirect to dashboard page upon successful login
|
||||||
|
window.location.href = '/dashboard';
|
||||||
|
} catch (error) {
|
||||||
|
// handle login error
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
116
tailwind.config.cjs
Normal file
116
tailwind.config.cjs
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
/* eslint-disable global-require */
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
//
|
||||||
|
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
|
||||||
|
'./node_modules/flowbite/**/*.js',
|
||||||
|
],
|
||||||
|
|
||||||
|
darkMode: 'class',
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: {
|
||||||
|
50: '#eff6ff',
|
||||||
|
100: '#dbeafe',
|
||||||
|
200: '#bfdbfe',
|
||||||
|
300: '#93c5fd',
|
||||||
|
400: '#60a5fa',
|
||||||
|
500: '#3b82f6',
|
||||||
|
600: '#2563eb',
|
||||||
|
700: '#1d4ed8',
|
||||||
|
800: '#1e40af',
|
||||||
|
900: '#1e3a8a',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: [
|
||||||
|
'Inter',
|
||||||
|
'ui-sans-serif',
|
||||||
|
'system-ui',
|
||||||
|
'-apple-system',
|
||||||
|
'system-ui',
|
||||||
|
'Segoe UI',
|
||||||
|
'Roboto',
|
||||||
|
'Helvetica Neue',
|
||||||
|
'Arial',
|
||||||
|
'Noto Sans',
|
||||||
|
'sans-serif',
|
||||||
|
'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji',
|
||||||
|
'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji',
|
||||||
|
],
|
||||||
|
body: [
|
||||||
|
'Inter',
|
||||||
|
'ui-sans-serif',
|
||||||
|
'system-ui',
|
||||||
|
'-apple-system',
|
||||||
|
'system-ui',
|
||||||
|
'Segoe UI',
|
||||||
|
'Roboto',
|
||||||
|
'Helvetica Neue',
|
||||||
|
'Arial',
|
||||||
|
'Noto Sans',
|
||||||
|
'sans-serif',
|
||||||
|
'Apple Color Emoji',
|
||||||
|
'Segoe UI Emoji',
|
||||||
|
'Segoe UI Symbol',
|
||||||
|
'Noto Color Emoji',
|
||||||
|
],
|
||||||
|
mono: [
|
||||||
|
'ui-monospace',
|
||||||
|
'SFMono-Regular',
|
||||||
|
'Menlo',
|
||||||
|
'Monaco',
|
||||||
|
'Consolas',
|
||||||
|
'Liberation Mono',
|
||||||
|
'Courier New',
|
||||||
|
'monospace',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
transitionProperty: {
|
||||||
|
width: 'width',
|
||||||
|
},
|
||||||
|
textDecoration: ['active'],
|
||||||
|
minWidth: {
|
||||||
|
kanban: '28rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
safelist: [
|
||||||
|
// In Markdown (README…)
|
||||||
|
'justify-evenly',
|
||||||
|
'overflow-hidden',
|
||||||
|
'rounded-md',
|
||||||
|
|
||||||
|
// From the Hugo Dashboard
|
||||||
|
'w-64',
|
||||||
|
'w-1/2',
|
||||||
|
'rounded-l-lg',
|
||||||
|
'rounded-r-lg',
|
||||||
|
'bg-gray-200',
|
||||||
|
'grid-cols-4',
|
||||||
|
'grid-cols-7',
|
||||||
|
'h-6',
|
||||||
|
'leading-6',
|
||||||
|
'h-9',
|
||||||
|
'leading-9',
|
||||||
|
'shadow-lg',
|
||||||
|
'bg-opacity-50',
|
||||||
|
'dark:bg-opacity-80',
|
||||||
|
|
||||||
|
// For Astro one
|
||||||
|
'grid',
|
||||||
|
],
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
//
|
||||||
|
//require('flowbite/plugin'),
|
||||||
|
//require('flowbite-typography'),
|
||||||
|
require('tailwind-scrollbar')({ nocompatible: true }),
|
||||||
|
],
|
||||||
|
};
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"jsx": "preserve"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user