bulletin-frontend/NewBulletinBoard.jsx at main · AshDev09/bulletin-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert, ScrollView } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './LoginScreen';
import SignUpScreen from './SignUpScreen';

const NewBulletinBoard = ({ navigation }) => {
  return (
    <View style={styles.outerContainer}>
      <ScrollView contentContainerStyle={styles.container}>
      </ScrollView>

      {/* Plus icon button rendered once here */}
      <TouchableOpacity
        style={styles.squareButton}
        onPress={() => navigation.navigate('CreateNewEvent')} // Change if needed
      >
        <Ionicons name="add" size={32} color="#fff" />
      </TouchableOpacity>
    </View>
  );
};

const FOLDER_TAB_HEIGHT = 15;

const styles = StyleSheet.create({
  outerContainer: {
    flex: 1,
    backgroundColor: '#AFF4C6',
  },
  container: {
    paddingVertical: 20,
    paddingHorizontal: 15,
    // Removed flex:1, justifyContent, alignItems from ScrollView container
  },
  card: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 15,
    padding: 15,
    alignItems: 'center',
    marginBottom: 20, // space between cards vertically
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 2 },
    elevation: 4,
  },
  folderIcon: {
    width: 50,
    height: 40,
    marginRight: 20,
    position: 'relative',
  },
  folderTab: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: 30,
    height: FOLDER_TAB_HEIGHT,
    backgroundColor: '#8BC34A',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  folderBody: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: 50,
    height: 30,
    backgroundColor: '#8BC34A',
    borderRadius: 8,
  },
  textContainer: {
    flex: 1,
  },
  eventName: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  respondButton: {
    backgroundColor: '#8BC34A',
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 12,
    alignSelf: 'flex-start',
  },
  respondButtonText: {
    color: '#fff',
    fontWeight: '600',
  },
  squareButton: {
    width: 60,
    height: 60,
    backgroundColor: '#000',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    bottom: 30,
    right: 30,
    borderRadius: 12,
    elevation: 5,
  },
});

export default NewBulletinBoard;