Skip to content

Commit c2c9e8d

Browse files
author
=William Roberts
committed
r4
1 parent 88abfaa commit c2c9e8d

13 files changed

+185
-28
lines changed

‎app/write/components/editor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { getStorage, ref,
1111
} from "firebase/storage";
1212
import AddTitle from './addItem'
1313
import AddItem from './addItem'
14-
import UploadedImages from './uploadedImages'
14+
import UploadedImages from './uploadImages/uploadedImages'
1515

1616
const Editor = () => {
1717
const router = useRouter()

‎app/write/components/uploadImage.tsx

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎app/write/components/uploadImages/uploadImageBtn.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
type theProps = {
3+
icon:React.ReactNode;
4+
text:string;
5+
icon2?:React.ReactNode;
6+
}
7+
const UploadImageButton = ({icon,icon2,text}:theProps) => {
8+
return (
9+
<button className='UI__btn'>
10+
{icon}
11+
{text}
12+
</button>
13+
)
14+
}
15+
16+
export default UploadImageButton

‎app/write/components/uploadImages/uploadedImage.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client"
2+
import Image from 'next/image'
3+
import React from 'react'
4+
import { useWrite } from '../../../../contexts/writeContext';
5+
type theProps = {
6+
src:string;
7+
}
8+
const UploadedImage = ({src}:theProps) => {
9+
const {localBlog}=useWrite()
10+
const [isClicked,setIsClicked]=React.useState<boolean>(false)
11+
return (
12+
<div className='UI__image'>
13+
14+
<Image
15+
className={isClicked? "blur-2xl":""}
16+
src="/" alt='/' fill sizes='200px'/>
17+
<div className='UI__image__grid'>
18+
<div
19+
className='flex flex-row items-center'>
20+
21+
</div>
22+
</div>
23+
</div>
24+
)
25+
}
26+
27+
export default UploadedImage
28+

‎app/write/components/uploadedImages.tsx renamed to ‎app/write/components/uploadImages/uploadedImages.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
"use client"
22
import React, { useEffect, useState } from 'react'
33
import {v4} from "uuid"
4+
import UploadedImage from './uploadedImage';
45
type theProps = {
56
images:string[];
67
}
78
const UploadedImages = ({images}:theProps) => {
89
const [index,setIndex]=useState(0)
910
const [maxIndex,setMaxIndex]=useState(0)
11+
const [loading,setLoading]=useState<boolean>(true)
12+
useEffect(()=>{
13+
setLoading(false)
14+
},[])
15+
1016
useEffect(()=>{
1117
//❤️debounce
1218
let timeout = setTimeout(()=>{
@@ -33,13 +39,14 @@ const UploadedImages = ({images}:theProps) => {
3339
}
3440
}
3541

36-
42+
if (loading) return;
3743
return (
3844
<div className='UI__frame'>
3945
<div className='UI__parent' style={{left:`${index*-114}px`}}>
4046
{images.map((item,index)=>(
4147
<div className='UI__item' key={v4()}>
42-
img {index}
48+
<UploadedImage src={item}/>
49+
{index}
4350
</div>
4451
)
4552

@@ -49,13 +56,13 @@ const UploadedImages = ({images}:theProps) => {
4956
<button
5057
onClick={()=>handleClick("left")}
5158
className='UI__button'
52-
style={{left:"17px"}}>
59+
style={{left:"17px",display:index===0?"none":""}}>
5360
L
5461
</button>
5562
<button
5663
onClick={()=>handleClick("right")}
5764
className='UI__button'
58-
style={{right:"17px"}}>
65+
style={{right:"17px",display:index===maxIndex?"none":""}}>
5966
R
6067
</button>
6168
</div>

‎icons/back.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// icon:bx-arrow-back | Boxicons https://boxicons.com/ | Atisa
2+
import * as React from "react";
3+
4+
function IconBxArrowBack(props) {
5+
return (
6+
<svg
7+
viewBox="0 0 24 24"
8+
fill="currentColor"
9+
height="1em"
10+
width="1em"
11+
{...props}
12+
>
13+
<path d="M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z" />
14+
</svg>
15+
);
16+
}
17+
18+
export default IconBxArrowBack;

‎icons/chevL.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// icon:left | Ant Design Icons https://ant.design/components/icon/ | Ant Design
2+
import * as React from "react";
3+
4+
function IconLeft(props) {
5+
return (
6+
<svg
7+
viewBox="0 0 1024 1024"
8+
fill="currentColor"
9+
height="1em"
10+
width="1em"
11+
{...props}
12+
>
13+
<path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z" />
14+
</svg>
15+
);
16+
}
17+
18+
export default IconLeft;

‎icons/chevR.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// icon:right | Ant Design Icons https://ant.design/components/icon/ | Ant Design
2+
import * as React from "react";
3+
4+
function IconRight(props) {
5+
return (
6+
<svg
7+
viewBox="0 0 1024 1024"
8+
fill="currentColor"
9+
height="1em"
10+
width="1em"
11+
{...props}
12+
>
13+
<path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z" />
14+
</svg>
15+
);
16+
}
17+
18+
export default IconRight;

‎icons/cover.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// icon:images | Ionicons https://ionicons.com/ | Ionic Framework
2+
import * as React from "react";
3+
4+
function IconImages(props) {
5+
return (
6+
<svg
7+
viewBox="0 0 512 512"
8+
fill="currentColor"
9+
height="1em"
10+
width="1em"
11+
{...props}
12+
>
13+
<path d="M450.29 112H142c-34 0-62 27.51-62 61.33v245.34c0 33.82 28 61.33 62 61.33h308c34 0 62-26.18 62-60V173.33c0-33.82-27.68-61.33-61.71-61.33zm-77.15 61.34a46 46 0 11-46.28 46 46.19 46.19 0 0146.28-46.01zm-231.55 276c-17 0-29.86-13.75-29.86-30.66v-64.83l90.46-80.79a46.54 46.54 0 0163.44 1.83L328.27 337l-113 112.33zM480 418.67a30.67 30.67 0 01-30.71 30.66H259L376.08 333a46.24 46.24 0 0159.44-.16L480 370.59z" />
14+
<path d="M384 32H64A64 64 0 000 96v256a64.11 64.11 0 0048 62V152a72 72 0 0172-72h326a64.11 64.11 0 00-62-48z" />
15+
</svg>
16+
);
17+
}
18+
19+
export default IconImages;

‎icons/delete.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// icon:delete | Ant Design Icons https://ant.design/components/icon/ | Ant Design
2+
import * as React from "react";
3+
4+
function IconDelete(props) {
5+
return (
6+
<svg
7+
viewBox="0 0 1024 1024"
8+
fill="currentColor"
9+
height="1em"
10+
width="1em"
11+
{...props}
12+
>
13+
<path d="M864 256H736v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zm-200 0H360v-72h304v72z" />
14+
</svg>
15+
);
16+
}
17+
18+
export default IconDelete;

‎styles/globals.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@
142142
--font-size-76:clamp(2.75rem, 2.3152rem + 2.3188vw, 4.75rem);
143143

144144
--line-height-56:clamp(3rem, 2.375rem + 2vw, 3.5rem);
145-
145+
--p-8-16:clamp(0.5rem, -0.125rem + 2vw, 1rem);
146146
--margin-24:clamp(1rem, 0.375rem + 2vw, 1.5rem);
147147

148148

‎styles/write.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,43 @@
5050
width: 114px;
5151
height: 100%;
5252
position: relative;
53+
@apply flex flex-row flex-nowrap
5354
}
5455
.UI__button {
5556
position: absolute;
5657
top: 50%;
5758

59+
box-shadow: var(--box-shadow-1);
60+
@apply rounded-full box-border;
5861
width: 34px;
5962
height: 34px;
6063
color: var(--code-d);
6164
background-color: var(--white);
6265
transform: translate(0%,-50%);
66+
}
67+
68+
.UI__image {
69+
background-color: var(--bg-4);
70+
width: 100%;
71+
height: 100%;
72+
position: relative;
73+
@apply flex items-center justify-center;
74+
padding-right: var(--p-8-16);
75+
}
76+
.UI__image > img {
77+
object-fit: cover;
78+
object-position: center;
79+
}
80+
.UI__image__grid {
81+
@apply absolute;
82+
display: grid;
83+
grid-template-columns: 1fr 1fr;
84+
grid-template-rows: 1fr 1fr;
85+
gap: 0rem;
86+
background-color: transparent;
87+
}
88+
.UI__btn {
89+
color: var(--code-d);
90+
font-size: var(--font-size-14);
91+
@apply flex flex-col;
6392
}

‎tailwind.config.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3-
content: [],
3+
content: [
4+
"./app/**/*.{js,ts,jsx,tsx,mdx}",
5+
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
6+
"./components/**/*.{js,ts,jsx,tsx,mdx}",
7+
8+
// Or if using `src` directory:
9+
"./src/**/*.{js,ts,jsx,tsx,mdx}",
10+
],
411
theme: {
512
extend: {},
613
},

0 commit comments

Comments
 (0)