diff --git a/astro.config.mjs b/astro.config.mjs index 72a0263..09f06e2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,7 +5,9 @@ import preact from "@astrojs/preact"; // https://astro.build/config export default defineConfig({ - integrations: [tailwind(), preact({ - compat: true - })], + integrations: [tailwind({ + applyBaseStyles: false, + }), preact({ + compat: true + })], }); diff --git a/package.json b/package.json index d2122d9..ca6f336 100644 --- a/package.json +++ b/package.json @@ -20,5 +20,8 @@ "react-icons": "^4.11.0", "sharp": "^0.32.5", "tailwindcss": "^3.3.3" + }, + "devDependencies": { + "daisyui": "^4.12.10" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 48bb744..2e6fbfd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -33,6 +33,11 @@ dependencies: specifier: ^3.3.3 version: 3.3.3 +devDependencies: + daisyui: + specifier: ^4.12.10 + version: 4.12.10(postcss@8.4.40) + packages: /@alloc/quick-lru@5.2.0: @@ -1603,7 +1608,6 @@ packages: /camelcase-css@2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - dev: false /camelcase@7.0.1: resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==} @@ -1815,11 +1819,34 @@ packages: which: 2.0.2 dev: false + /css-selector-tokenizer@0.8.0: + resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==} + dependencies: + cssesc: 3.0.0 + fastparse: 1.1.2 + dev: true + /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true - dev: false + + /culori@3.3.0: + resolution: {integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dev: true + + /daisyui@4.12.10(postcss@8.4.40): + resolution: {integrity: sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==} + engines: {node: '>=16.9.0'} + dependencies: + css-selector-tokenizer: 0.8.0 + culori: 3.3.0 + picocolors: 1.0.1 + postcss-js: 4.0.1(postcss@8.4.40) + transitivePeerDependencies: + - postcss + dev: true /debug@4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} @@ -2115,6 +2142,10 @@ packages: micromatch: 4.0.5 dev: false + /fastparse@1.1.2: + resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==} + dev: true + /fastq@1.15.0: resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==} dependencies: @@ -3281,7 +3312,6 @@ packages: resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: false /napi-build-utils@1.0.2: resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==} @@ -3539,7 +3569,6 @@ packages: /picocolors@1.0.1: resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==} - dev: false /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} @@ -3610,6 +3639,16 @@ packages: postcss: 8.4.29 dev: false + /postcss-js@4.0.1(postcss@8.4.40): + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.40 + dev: true + /postcss-load-config@4.0.1(postcss@8.4.29): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} engines: {node: '>= 14'} @@ -3665,7 +3704,6 @@ packages: nanoid: 3.3.7 picocolors: 1.0.1 source-map-js: 1.2.0 - dev: false /preact-render-to-string@6.2.1(preact@10.17.1): resolution: {integrity: sha512-5t7nFeMUextd53igL3GAakAAMaUD+dVWDHaRYaeh1tbPIjQIBtgJnMw6vf8VS/lviV0ggFtkgebatPxvtJsXyQ==} @@ -4141,7 +4179,6 @@ packages: /source-map-js@1.2.0: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} - dev: false /space-separated-tokens@2.0.2: resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==} diff --git a/src/components/EspaceMembres.tsx b/src/components/EspaceMembres.tsx index c8ab47f..342f9ab 100644 --- a/src/components/EspaceMembres.tsx +++ b/src/components/EspaceMembres.tsx @@ -3,6 +3,7 @@ import Login from "./Login"; import PocketBase from 'pocketbase'; import { useContext, useEffect, useState } from "preact/hooks"; import Home from "./Members/Home"; +import SimpleHome from "./Members/SimpleHome"; export const pbUrl = import.meta.env.PUBLIC_PB_API; @@ -66,7 +67,8 @@ export default function EspaceMembres() { navigate, }}> {{ - '/': , + // '/': , + '/': , '/login': , }[route]} diff --git a/src/components/Members/SimpleHome.tsx b/src/components/Members/SimpleHome.tsx new file mode 100644 index 0000000..c8acf0e --- /dev/null +++ b/src/components/Members/SimpleHome.tsx @@ -0,0 +1,138 @@ +import { useContext, useEffect, useState } from "preact/hooks"; +import { FaEdit, FaPlus, FaTrash } from "react-icons/fa"; +import { Pb } from "../EspaceMembres"; +import type { UsersRecord } from "../../types/pb_types"; +import { createContext } from "preact"; + +const FormContext = createContext((key: string, value: string) => { }); + +function SimpleHome() { + const pb = useContext(Pb); + const { firstname, lastname }: UsersRecord = pb.authStore.model || {}; + const email = pb.authStore.model?.email || ""; + + const [form, setForm] = useState([]); + + const setFormValue = (key: string, value: string) => { + setForm((prev) => ({ ...prev, [key]: value })); + }; + + const onSubmit = (e: Event) => { + e.preventDefault(); + saveForm(form); + }; + + const saveForm = (data: { [key: string]: string }[]) => { + const record = pb.collection("users").update(pb.authStore.model?.id, data); + record.then((res) => { + console.log(res); + }).catch((error) => { + console.error(error); + }); + } + + return ( +
+
+
+
+

Gallery

+ +
+
+ {[...Array(6)].map((_, i) => ( + + ))} +
+
+
+
+
+

Informations personnelles

+ +
+ + + +
+ +
+ +
+
+
+
+ ); +} + +function FormInput({ + label, + id, + type = "text", + value, + className, + disabled, +}: { + label: string; + id: string; + type?: string; + value?: string; + className?: string; + disabled?: boolean; +}) { + const setFormValue = useContext(FormContext); + const [val, setVal] = useState(value); + + const onChange = (e: Event) => { + const target = e.target as HTMLInputElement; + setVal(target.value); + setFormValue(target.id, target.value); + } + + useEffect(() => { + setFormValue(id, value || ""); + }, [value]); + + return ( + + ); +} + +function Picture() { + return ( +
+ Gallery Image +
+ + +
+
+ ); +} + +export default SimpleHome; diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index c8b9d07..2bf0469 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,6 +1,7 @@ --- import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; +import '../styles/base.css'; interface Props { title: string; @@ -12,7 +13,7 @@ const { title, footer = true, className } = Astro.props; --- - + diff --git a/src/pages/espace-membres.astro b/src/pages/espace-membres.astro index 0364968..81ac7e7 100644 --- a/src/pages/espace-membres.astro +++ b/src/pages/espace-membres.astro @@ -2,6 +2,6 @@ import Layout from '../layouts/Layout.astro'; import EspaceMembres from '../components/EspaceMembres.tsx'; --- - + diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..98810d2 --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,161 @@ +@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap'); + +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer base { + body { + @apply font-Lato; + } +} + +@keyframes fade-in { + from { + opacity: 0; + } +} + +@keyframes fade-out { + to { + opacity: 0; + } +} + +@keyframes slide-from-right { + from { + transform: translateX(90px); + } +} + +@keyframes slide-to-left { + to { + transform: translateX(-90px); + } +} + +/* define animations for the old and new content */ +::view-transition-old(slide-it) { + animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(slide-it) { + animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, + 600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} + +/* tie the view transition to a given CSS class */ +.sample-transition { + view-transition-name: slide-it; +} + +/***** MODAL DIALOG ****/ +#modal { + /* Underlay covers entire screen. */ + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1000; + + /* Flexbox centers the .modal-content vertically and horizontally */ + display: flex; + flex-direction: column; + align-items: center; + + /* Animate when opening */ + animation-name: fadeIn; + animation-duration: 300ms; + animation-timing-function: ease; +} + +#modal>.modal-underlay { + /* underlay takes up the entire viewport. This is only + required if you want to click to dismiss the popup */ + position: absolute; + z-index: -1; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; +} + +#modal>.modal-content { + /* color: black; */ + /* Position visible dialog near the top of the window */ + margin-top: 10vh; + + /* Sizing for visible dialog */ + width: 80%; + max-width: 400px; + + /* Display properties for visible dialog*/ + /* border: solid 1px #999; + border-radius: 8px; + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3); + background-color: white; + padding: 20px; */ + + /* Animate when opening */ + animation-name: zoomIn; + animation-duration: 300ms; + animation-timing-function: ease; +} + +#modal.closing { + /* Animate when closing */ + animation-name: fadeOut; + animation-duration: 300ms; + animation-timing-function: ease; +} + +#modal.closing>.modal-content { + /* Animate when closing */ + animation-name: zoomOut; + animation-duration: 300ms; + animation-timing-function: ease; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeOut { + 0% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} + +@keyframes zoomIn { + 0% { + transform: scale(0.8); + } + + 100% { + transform: scale(1); + } +} + +@keyframes zoomOut { + 0% { + transform: scale(1); + } + + 100% { + transform: scale(0.8); + } +} + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f5368a7..300f2fe 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -1,8 +1,15 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], - theme: { - extend: {}, - }, - plugins: [], + theme: { + extend: { + fontFamily: { + Lato: ["Lato, sans-serif"], + }, + }, + }, + plugins: [require("daisyui")], + daisyui: { + themes: ["light", "dark"], + }, }